/* ===========================
   PRICING.CSS — Kteam Architects
   Pixel-perfect from Penpot @ 1512px
   =========================== */

/* ============================================================
   SECTION PADDING OVERRIDE (right=48px per design)
   ============================================================ */
#pricing-intro .section__main,
#predesign .section__main,
#fulldesign .section__main,
#howto .section__main,
#faq .section__main {
    padding-right: clamp(24px, 3.17vw, 48px);
}

/* ============================================================
   INTRO
   — h1: Lora 64px / lh 1.1
   — text block: 658px, pushed to the right (justify=end)
   — button: filled black
   ============================================================ */
.prc-intro__main {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.17vw, 48px);
}

.prc-intro__h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.23vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}

.prc-intro__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(658px, 100%);
    margin-left: auto;
    padding-bottom: clamp(32px, 3.17vw, 48px);
}

.prc-intro__text {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
    margin: 0;
}

.prc-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    align-self: flex-start;
    border: none;
}

.prc-intro__btn:hover {
    opacity: 0.8;
    color: #fff;
}

/* ============================================================
   SHARED H2 (fs=56 Lora, lh=1.15, lowercase)
   ============================================================ */
.prc-section__h2 {
    font-family: var(--font-serif);
    font-size: clamp(32px, 3.7vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    color: #000;
   
    text-transform: uppercase;
}

/* ============================================================
   PRE-DESIGN PACKAGES
   — 4 equal columns
   — card pad=24, gap=12
   — title: Poppins 14px fw=500 ls=1.68 #b76106
   — timeframe: Poppins 14px #888
   — price: Lora 32px #000
   — features: Poppins 16px fw=300 #505050
   ============================================================ */
.prc-predesign__main {
    display: flex;
    flex-direction: column;
}

.prc-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

.prc-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 12px;
    border-right: 1px solid var(--color-border);
    background: #fff;
}

.prc-card:last-child {
    border-right: none;
}

.prc-card--highlighted {
    background: #f3f0e1;
}

/* content block (title + timeframe + price + desc) */
.prc-card__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
		border-bottom: 1px solid  #D1D1D1;
}

.prc-card__label-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prc-card__label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 1.68px;
    color: #b76106;
    text-transform: uppercase;
    margin: 0;
}

.prc-card__timeframe {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #888;
}

.prc-card__price {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

.prc-card__desc {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
    margin: 0;
}

/* features list (same typography as desc) */
.prc-card__features {
list-style: disc;
    margin: 0;
		margin-left: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
		
}

.prc-card__features li {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
}

/* ============================================================
   FULL DESIGN SERVICES
   — 4 columns, first highlighted
   — label: Poppins 14px fw=500 ls=1.68 #b76106, height=42px container
   — price: Lora 32px / desc: Poppins 16px fw=300
   ============================================================ */
.prc-fulldesign__main {
    display: flex;
    flex-direction: column;
}

.prc-svc-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}

.prc-svc-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-right: 1px solid var(--color-border);

}

.prc-svc-card:last-child {
    border-right: none;
}

.prc-svc-card--highlighted {
    background: #f3f0e1;
}

/* label header — fixed 42px height to align all 4 cards */
.prc-svc-card__label-wrap {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 0;
    margin-bottom: 6px;
}

.prc-svc-card__label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 1.68px;
    color: #b76106;
    text-transform: uppercase;
    margin: 0;
}

/* content: price + description */
.prc-svc-card__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
}

.prc-svc-card__price-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.prc-svc-card__price {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

.prc-svc-card__rate {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #888;
    margin: 0;
}

.prc-svc-card__desc {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
    margin: 0;
}

/* ============================================================
   HOW TO CHOOSE
   — layout: CTA 256px + accordion 520px + image 426px
   — gap=48 between items
   — accordion row: pad=[24,0], gap=24, top border
   — need text: Poppins 16px fw=300 #505050
   — service name: Lora 24px lh=1.35 #000
   ============================================================ */
.prc-howto__main {
    display: flex;
    flex-direction: column;
}

.prc-howto__body {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
}

/* CTA image: 256×256 */
.prc-howto__cta {
    flex: 0 0 256px;
    width: 256px;
    height: 256px;
    position: relative;
    overflow: hidden;
    background: #f3f0e1;
    align-self: flex-end;
}

.prc-howto__cta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* Accordion list: 520px, bottom border */
.prc-howto__list {
    flex: 0 0 520px;
    width: 520px;
    display: flex;
    flex-direction: column;
  
}

.prc-howto-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-border);
}

/* clickable row */
.prc-howto-item__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}


.prc-howto-item__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
}

.prc-howto-item__need {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
}

.prc-howto-item__service {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
    color: #000;
}

.prc-howto-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

/* plus to minus: hide vertical line */
.prc-howto-icon-v {
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-origin: center;
}
.prc-howto-item.open .prc-howto-icon-v {
    opacity: 0;
    transform: scaleY(0);
}

/* answer */
.prc-howto-item__answer {
    height: 0;
    overflow: hidden;
}
.prc-howto-item__answer-inner {
    padding-bottom: 20px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #505050;
}

/* Large image: 426×576 */
.prc-howto__img {
    flex: 0 0 426px;
    width: 426px;
    height: 576px;
    position: relative;
    overflow: hidden;
}

.prc-howto__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* ============================================================
   RESPONSIVE — tablet (≤1200px)
   ============================================================ */
@media (max-width: 1200px) {
    .prc-cards,
    .prc-svc-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .prc-card:nth-child(2),
    .prc-svc-card:nth-child(2) {
        border-right: none;
    }

    .prc-card:nth-child(1),
    .prc-card:nth-child(2),
    .prc-svc-card:nth-child(1),
    .prc-svc-card:nth-child(2) {
        border-bottom: 1px solid var(--color-border);
    }

    .prc-howto__body {
        gap: 24px;
    }

    .prc-howto__cta {
        flex: 0 0 180px;
        width: 180px;
        height: 180px;
    }

    .prc-howto__list {
        flex: 1;
        width: auto;
    }

    .prc-howto__img {
        flex: 0 0 240px;
        width: 240px;
        height: 360px;
    }
}

/* ============================================================
   RESPONSIVE — mobile (≤767px)
   ============================================================ */
@media (max-width: 767px) {
    .prc-intro__body {
        margin-left: 0;
        width: 100%;
    }

		  
    .prc-cards,
    .prc-svc-cards {
        grid-template-columns: 1fr;
    }

    .prc-card,
    .prc-svc-card {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .prc-card:nth-child(1),
    .prc-card:nth-child(2),
    .prc-svc-card:nth-child(1),
    .prc-svc-card:nth-child(2) {
        border-bottom: 1px solid var(--color-border);
    }

    .prc-card:last-child,
    .prc-svc-card:last-child {
        border-bottom: none;
    }

    .prc-howto__body {
        flex-direction: column;
        gap: 0;
    }

    .prc-howto__cta,
    .prc-howto__img {
        display: none;
    }

    .prc-howto__list {
        flex: none;
        width: 100%;
    }
}