/*
 * Shared block/component styles.
 * Keep visual CSS here (or split/import later) rather than inside each block folder.
 * This file is loaded on the front end and in the Block Editor.
 */

.project-block {
    position: relative;
}

.project-block > .site-container > h2 {
    margin-bottom: 2rem;
}

.project-block--contact-form .wpcf7-form {
    max-width: 760px;
}

/* Add block-specific selectors below as the design develops. */

/* Starter ACF cards. Intentionally minimal so the final design can replace these rules. */
.project-card,
.project-price-card {
    border: 1px solid color-mix(in srgb, var(--project-text) 14%, transparent);
    border-radius: var(--wp--custom--radius--medium, 16px);
    overflow: hidden;
    background: var(--project-background);
}

.project-card__media img { display: block; width: 100%; height: auto; }
.project-card__body, .project-card--3, .project-price-card { padding: 1.25rem; }
.project-card__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.project-pill { display: inline-flex; padding: .35rem .7rem; border-radius: 999px; background: var(--project-accent); line-height: 1; }
.project-card__icon img { width: 48px; height: 48px; object-fit: contain; }
.project-card--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); }
.project-card--2 .project-card__media img { width: 100%; height: 100%; object-fit: cover; }

.project-price-card { border-top: 4px solid var(--project-primary); }
.project-price-card__price { display: flex; align-items: baseline; gap: .35rem; color: var(--project-primary); }
.project-price-card__currency { font-weight: 700; }
.project-price-card__amount { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: 1; }
.project-price-card__basis { opacity: .75; }
.project-price-card__extras,
.project-price-card__payment,
.project-price-card__dates { margin-top: 1rem; }

@media (max-width: 680px) {
    .project-card--2 { grid-template-columns: 1fr; }
}