/* Pricing Section block styles.
   Extracted from template-parts/blocks/pricing_section.php — DO NOT redefine inline.
   Loaded by lucern_block_assets('pricing_section') from the block template. */

/* ==========================================================================
   Pricing Section Styles - Accordion Version
   ========================================================================== */

.pricing-section {
    --pricing-accent: #BAAE92;
    --pricing-text: #2D2D2D;
    --pricing-text-light: #555756;
    --pricing-border: #D4D4D4;
    --pricing-card-bg: linear-gradient(180deg, #E6E0CE 0%, #FAFAFA 100%);
    --pricing-badge-bg: #1A3A5C;
    --pricing-radius: 12px;
    --pricing-transition: 0.3s ease;
}

.pricing-section__header {
    margin-bottom: var(--size-8, 2rem);
}

.pricing-section__title {
    /* margin-bottom: var(--size-6); */
}

.pricing-section__description {
    /* color: var(--pricing-text-light); */
}

/* ==========================================================================
   Pricing Cards Container
   ========================================================================== */

.pricing-cards {
    display: flex;
    flex-direction: column;
    gap: var(--size-5, 1.25rem);
    margin-bottom: var(--size-8, 2rem);
}

/* ==========================================================================
   Pricing Card (Accordion)
   ========================================================================== */

.pricing-card {
    background: var(--pricing-card-bg);
    border-radius: var(--pricing-radius);
    /* overflow: hidden; */
    position: relative;
    padding: var(--size-8);

    @media(max-width:768px) {
        padding:var(--size-8) var(--size-5);
    }
}

/* Discount badge */
/* Discount badge */
.pricing-card--discount {
    position: relative;
}

.pricing-card__badge {
    position: absolute;
    top: -30px;
    right: var(--size-6, 1.5rem);
    transform: translateY(0);

}

@media (max-width: 768px) {
    .pricing-card__badge {
        top: -25px;
    }

    .pricing-card__badge svg {
        width: 90px;
        height: auto;
    }
}

/* ==========================================================================
   Card Header (Trigger)
   ========================================================================== */

.pricing-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: var(--size-5, 1.25rem) var(--size-6, 1.5rem); */
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0 0 var(--size-7) 0;
}

/* On single Brust posts AND the Brust treatment archive: collapsed cards
   sit flush (no bottom padding); padding animates back in as the card opens. */
.single-brust .pricing-card__header,
.post-type-archive-brust .pricing-card__header,
.archive-treatment--brust .pricing-card__header {
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.single-brust .pricing-card:not(.is-open) .pricing-card__header,
.post-type-archive-brust .pricing-card:not(.is-open) .pricing-card__header,
.archive-treatment--brust .pricing-card:not(.is-open) .pricing-card__header {
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .pricing-card__header {
        align-items: flex-start;
    }
}

.pricing-card__title {
    font: normal normal 500 28px/41px var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);
    margin: 0;
    padding-right: var(--size-8, 2rem);

    @media(max-width:768px) {
        font: normal normal 500 22px/25px var(--font-heading, 'Montserrat', sans-serif);
        letter-spacing: 0;
    }
}


.pricing-card__toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--pricing-transition);
    margin-right: var(--size-6, 1.5rem);

    @media(max-width:768px) {
        margin-right: 0;
    }
}

.pricing-card__toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--pricing-text-light);
    transition: transform var(--pricing-transition);
    transform: rotate(180deg);
}

.pricing-card.is-open .pricing-card__toggle svg {
    transform: rotate(0deg);
}

/* ==========================================================================
   Card Content (Collapsible)
   ========================================================================== */

.pricing-card__content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--pricing-transition);
}

.pricing-card:not(.is-open) .pricing-card__content {
    grid-template-rows: 0fr;
}

.pricing-card__inner {
    overflow: hidden;
}

.pricing-card__body {
    /* padding: 0 var(--size-6, 1.5rem) var(--size-6, 1.5rem); */
}

/* ==========================================================================
   Price Columns Grid
   ========================================================================== */

.pricing-card__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--size-6, 1.5rem);
}

.pricing-card__columns[data-columns="1"] .pricing-column {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .pricing-card__columns {
        grid-template-columns: 1fr;
        gap: 33px;
    }
}

/* Odd column count (3,5,7…): last column spans full width — desktop only, skip if only 1 */
@media (min-width: 641px) {
    .pricing-column:last-child:nth-child(odd):not(:first-child) {
        grid-column: span 2;
    }

    .pricing-column:last-child:nth-child(odd):not(:first-child) .pricing-column__header {
        width: fit-content;
    }
}

@media (max-width: 640px) {
    .pricing-column:last-child:nth-child(odd):not(:first-child) {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Price Column
   ========================================================================== */

.pricing-column {
    display: flex;
    flex-direction: column;
}

.pricing-column__header {
    display: flex;
    align-items: baseline;
    gap: var(--size-2, 0.5rem);
    margin-bottom: var(--size-4, 1rem);
    padding-bottom: var(--size-3, 0.75rem);
    border-bottom: 1px solid #BAAE92;
}

.pricing-column__price {
    font: normal normal 600 18px/24px var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);

    @media(max-width:768px) {
        font: normal normal 600 16px/25px var(--font-heading, 'Montserrat', sans-serif);

    }
}

.pricing-column__price-note {
    font: normal normal 600 14px/17px var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);
}

/* Desktop: render the "| " separator before the note. Mobile: hide it. */
.pricing-column__price-note::before {
    content: '| ';
}

@media (max-width: 768px) {
    .pricing-column__header {
        flex-wrap: wrap;
        margin-bottom: 0;
        padding-bottom: 16px;
    }

    /* !important required: base .pricing-column__items rule uses the
       `padding: 0` shorthand (declared later in source order, same
       specificity), which would otherwise zero out padding-top. */
    .pricing-column__items {
        padding-top: 16px !important;
    }

    .pricing-column__price-note::before {
        content: none;
    }
}

/* ==========================================================================
   Items List
   ========================================================================== */

.pricing-column__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-2, 0.5rem);
}

.pricing-column__item {
    display: flex;
    align-items: flex-start;
    gap: var(--size-3, 0.75rem);
    font: normal normal 400 18px/32px var(--font-body, 'Open Sans', sans-serif);
    color: var(--pricing-text);
}

.pricing-column__item-text a {
    color: var(--clr-primary-500);
}

/* Secondary price after the " | " separator — smaller body-style font */
.pricing-column__item-text-secondary {
    font: normal normal 500 14px/17px var(--font-body, 'Open Sans', sans-serif);
}

.pricing-column__item-icon {
    flex-shrink: 0;
    width: 24px;
    /* height: 13px; */
    /* margin-top: 10px; */
}

.pricing-column__item-icon svg {
    width: 100%;
    height: 100%;
}



@media (max-width: 768px) {
    .pricing-column__item {
        font-size: 16px;
        line-height: 26px;
    }

    .pricing-column__item-icon {
        margin-top: 0;
        width: 17px;
        height: 13px;
    }

    .single-brust .pricing-cards {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Booking Link
   ========================================================================== */

.pricing-card__booking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--size-5, 1.25rem);
    padding-top: var(--size-4, 1rem);
    /* border-top: 1px solid var(--pricing-border); */
    color: var(--pricing-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pricing-card__booking:hover {
    color: var(--pricing-text);
}

.pricing-card__booking-icon {
    flex-shrink: 0;
}

.pricing-card__booking-icon svg {
    width: 100%;
    height: 100%;
}

.pricing-card__booking-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Footnote
   ========================================================================== */

.pricing-section__footnote {
    margin-bottom: var(--size-6, 1.5rem);
}

.pricing-section__footnote-title {
    font: normal normal 600 15px/1.4 var(--font-heading, sans-serif);
    color: var(--pricing-text);
    margin-bottom: var(--size-2, 0.5rem);
}

.pricing-section__footnote-text {
    font: normal normal 400 14px/1.7 var(--font-body, sans-serif);
    /* color: var(--pricing-text-light); */
}

/* Footnote placed inline under description (enhanced layout) */
.pricing-section__footnote--inline {
    border-top: 1px solid var(--clr-neutral-200, #ebebeb);
    padding-top: var(--size-6, 24px);
    margin-top: var(--size-4, 16px);
    margin-bottom: 0;
}

.pricing-section__footnote--inline .pricing-section__footnote-title {
    font: normal normal 400 20px/24px var(--font-heading, serif);
    text-transform: none;
    margin-bottom: 8px;
}

.pricing-section__footnote--inline .pricing-section__footnote-text {
    font: normal normal 400 16px/1.7 var(--font-body, sans-serif);
    color: var(--clr-neutral-600, #555756);
}

/* ==========================================================================
   Button
   ========================================================================== */

.pricing-section__button {
    display: inline-flex;
}

/* ==========================================================================
   Compact Card Style (Vorteile toggle only)
   ========================================================================== */

.pricing-card--compact .pricing-card__title {
    padding-right: 0;
    padding-bottom: 0;
}

.pricing-card__vorteile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pricing-border);
    padding: var(--size-3, 0.75rem) 0;
    margin-top: var(--size-5, 1.25rem);
    font: normal normal 600 18px/1.4 var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);
    text-align: left;
}

.pricing-card__vorteile-header .pricing-card__toggle {
    margin-right: 0;
    width: 13px;
    height: 13px;
}

/* +/- icon toggle */
.pricing-card--compact .pricing-card__icon-minus { display: none; }
.pricing-card--compact.is-open .pricing-card__icon-plus { display: none; }
.pricing-card--compact.is-open .pricing-card__icon-minus { display: block; }

.pricing-card__vorteile-content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--pricing-transition);
}

.pricing-card--compact:not(.is-open) .pricing-card__vorteile-content {
    grid-template-rows: 0fr;
}

.pricing-card__vorteile-inner {
    overflow: hidden;
}

.pricing-card__vorteile-inner .pricing-card__columns {
    padding-top: var(--size-4, 1rem);
}

@media (max-width: 768px) {
    .pricing-card__vorteile-header {
        font-size: 16px;
    }
}

/* ==========================================================================
   Layout: List (Title + Link rows)
   ========================================================================== */

.pricing-list {
    background: var(--pricing-card-bg);
    border-radius: var(--pricing-radius);
    padding: var(--size-4, 1rem) var(--size-8, 2rem);
    margin-bottom: var(--size-8, 2rem);
}

.pricing-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-4, 1rem);
    padding: var(--size-4, 1rem) 0;
    border-bottom: 1px solid var(--pricing-border);
}

.pricing-list__row:last-child {
    border-bottom: none;
}

.pricing-list__title {
    font: normal normal 500 18px/1.4 var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);
    margin: 0;
}

@media (max-width: 768px) {
    .pricing-list__title {
        font-size: 16px;
    }
}

.pricing-list__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: normal normal 400 14px/1 var(--font-body, sans-serif);
    color: var(--pricing-text-light);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.pricing-list__link:hover {
    color: var(--pricing-text);
}

.pricing-list__link-icon {
    flex-shrink: 0;
    width: 7px;
    height: 11px;
}

.pricing-list__link-icon svg {
    width: 100%;
    height: 100%;
}

.pricing-list__link-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Enhanced Cards — PDF link & plain items
   ========================================================================== */

.pricing-card-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--size-5, 1.25rem);
    padding-top: var(--size-4, 1rem);
    font: normal normal 400 14px/1 var(--font-body, sans-serif);
    color: var(--pricing-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pricing-card-pdf:hover {
    color: var(--pricing-text);
}

.pricing-card-pdf__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.pricing-card-pdf__icon svg {
    width: 100%;
    height: 100%;
}

.pricing-card-pdf__text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pricing-column__item--plain {
    padding-left: 0;
}

a.pricing-column__price {
    color: var(--pricing-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

a.pricing-column__price:hover {
    color: var(--clr-primary-500, #F8BFA1);
}

/* ==========================================================================
   Layout: Content Sections (Title + Text blocks) — Card style
   ========================================================================== */

.pricing-content-sections {
    display: flex;
    flex-direction: column;
    gap: var(--size-5, 1.25rem);
    margin-bottom: var(--size-8, 2rem);
}

.pricing-content-block {
    background: var(--pricing-card-bg);
    border-radius: var(--pricing-radius);
    padding: var(--size-8);
}

.pricing-content-block__title {
    font: normal normal 500 28px/41px var(--font-heading, 'Montserrat', sans-serif);
    color: var(--pricing-text);
    margin: 0 0 var(--size-6, 24px) 0;
}

.pricing-content-block__body {
    font: normal normal 400 18px/32px var(--font-body, 'Open Sans', sans-serif);
    color: var(--pricing-text);
}

.pricing-content-block__body p:last-child {
    margin-bottom: 0;
}

.pricing-content-block__body a {
    color: var(--clr-primary-500);
}

@media (max-width: 768px) {
    .pricing-content-block__title {
        font-size: 22px;
        line-height: 1.4;
    }

    .pricing-content-block__body {
        font-size: 16px;
        line-height: 26px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .pricing-card__content,
    .pricing-card__toggle,
    .pricing-card__toggle svg {
        transition: none;
    }
}