/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/css/blocks/plan_benefits/view.css ***!
  \**********************************************************************************************************************************************************************************************/
/* ---------------------------------------------------------------------------
   Plan Benefits block — responsive table → stacked-card transform.

   Below the md breakpoint (768px), all <table> rows become stacked cards:
   each tier row's column cells render as "Column Name: value" pairs. This
   is better than horizontal scroll for the 65+ audience, who often miss
   scroll affordances on mobile.

   No Tailwind directive at the top — the main tailwind.css bundle declares
   the brand tokens at :root, so var(--color-brand-*) works here without
   re-emitting Tailwind's utility layer. If this file ever needs @apply,
   switch to: @reference "../../tailwind.css";
   --------------------------------------------------------------------------- */

/* ─── SHARED — richtext width cap doesn't apply here ──────────────────── */
/* Tabular content fills its cell; the global .richtext > * max-w-prose cap
   (from tailwind.css) would squeeze long paragraphs and phone numbers. */
.plan-benefits .richtext > p,
.plan-benefits .richtext > ul,
.plan-benefits .richtext > ol,
.plan-benefits .richtext > blockquote {
    max-width: none;
}

/* ─── SHARED — suppress doubled top border against the card's outer ring ── */
/* The card has `ring-1 ring-brand-black/10`; any first-child band inside
   would otherwise draw its own matching 1px border on top of that ring. */
.plan-benefits__summary tr.plan-benefits__summary-section:first-child > th {
    border-top: 0;
}

.plan-benefits__card > .plan-benefits__matrix-title:first-child {
    border-top: 0;
}

.plan-benefits__card > table:first-child .plan-benefits__matrix-head {
    border-top: 0;
}

/* ─── MOBILE (< md) — stacked-card transform for both tables ────────────── */
@media (max-width: 767.98px) {

    /* Summary table: label stacks above value, uppercase eyebrow style. */
    .plan-benefits__summary,
    .plan-benefits__summary tbody,
    .plan-benefits__summary tr,
    .plan-benefits__summary th,
    .plan-benefits__summary td {
        display: block;
        width: 100%;
    }

    .plan-benefits__summary tr {
        padding: 1rem 1.25rem;
        border-top: 1px solid color-mix(in oklch, var(--color-brand-black) 10%, transparent);
    }

    .plan-benefits__summary tr:first-child {
        border-top: 0;
    }

    /* Section headers span edge-to-edge of the card on mobile; the <th>
       inside carries its own Tailwind padding, so the outer <tr> adds none. */
    .plan-benefits__summary tr.plan-benefits__summary-section {
        padding: 0;
    }

    .plan-benefits__summary-label {
        padding: 0 0 0.5rem 0 !important;
        background: transparent !important;
        /* 1rem keeps the uppercase eyebrow readable for a 65+ audience. */
        font-size: 1rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: color-mix(in oklch, var(--color-brand-black) 70%, transparent);
    }

    .plan-benefits__summary-value {
        padding: 0 !important;
    }

    /* Cost matrix: column headers hide, each row becomes a card, each cell
       becomes a "Column Name: value" row inside that card. */
    .plan-benefits__matrix thead {
        display: none;
    }

    .plan-benefits__matrix,
    .plan-benefits__matrix tbody,
    .plan-benefits__matrix tr,
    .plan-benefits__matrix th,
    .plan-benefits__matrix td {
        display: block;
        width: 100%;
    }

    .plan-benefits__tier-row {
        padding: 1rem 1.25rem;
        border-top: 1px solid color-mix(in oklch, var(--color-brand-black) 10%, transparent);
    }

    .plan-benefits__tier-label {
        padding: 0 0 0.5rem 0 !important;
        font-size: 1rem;
        font-weight: 500;
    }

    /* Default tier cell: label above value, left-aligned. Compact numeric
       cells opt back into the two-column label | value layout below. */
    .plan-benefits__tier-cell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
        padding: 0.375rem 0 !important;
        text-align: left !important;
        border-top: 1px dashed color-mix(in oklch, var(--color-brand-black) 10%, transparent);
    }

    .plan-benefits__tier-cell:first-of-type {
        border-top: 0;
    }

    .plan-benefits__tier-cell::before {
        content: attr(data-column-label);
        display: block;
        text-align: left;
        font-weight: 500;
        color: color-mix(in oklch, var(--color-brand-black) 70%, transparent);
    }

    /* Compact numeric types: put label and value on one row, value right-flush. */
    .plan-benefits__tier-cell[data-cell-type="flat"],
    .plan-benefits__tier-cell[data-cell-type="percent"] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: baseline;
        text-align: right !important;
    }

    .plan-benefits__tier-cell[data-cell-type="flat"]::before,
    .plan-benefits__tier-cell[data-cell-type="percent"]::before {
        text-align: left;
    }

    /* Empty cells shouldn't show a dangling column label. The is-empty class
       is the broad-support backstop; :empty and :has() catch edge cases in
       newer browsers. */
    .plan-benefits__tier-cell.is-empty::before,
    .plan-benefits__tier-cell:empty::before,
    .plan-benefits__tier-cell:has(> :empty:only-child)::before {
        display: none;
    }

    /* Bulleted-breakdown cells (Specialty Drugs) already match the default
       stacked layout; re-declare in case future overrides land above. */
    .plan-benefits__tier-cell:has(> .plan-benefits__cell-list) {
        grid-template-columns: minmax(0, 1fr);
        text-align: left !important;
    }

    .plan-benefits__tier-cell .plan-benefits__cell-list {
        margin: 0;
        padding-left: 1rem;
    }

    /* Banner rows keep their full-width treatment on mobile. */
    .plan-benefits__banner-row th {
        padding: 0.75rem 1.25rem !important;
    }
}

/* ─── DESKTOP (≥ md) — structural refinements ───────────────────────────── */
@media (min-width: 768px) {
    /* Subtle divider between summary rows on desktop. The <tr> border-top
       used on mobile doesn't render consistently with border-collapse tables,
       so we draw it on the cells instead. */
    .plan-benefits__summary tbody tr + tr > th,
    .plan-benefits__summary tbody tr + tr > td {
        border-top: 1px solid color-mix(in oklch, var(--color-brand-black) 10%, transparent);
    }

    .plan-benefits__summary-label {
        width: clamp(10rem, 25%, 18rem);
    }

    .plan-benefits__tier-label {
        width: clamp(10rem, 25%, 18rem);
    }

    .plan-benefits__tier-cell > .plan-benefits__cell-list {
        /* Visually center the list block under the column header while keeping
           list content left-aligned internally. */
        display: inline-block;
        text-align: left;
    }

    /* Prevent column headers from collapsing too narrowly when there are
       many columns; each pharmacy column gets a reasonable minimum width. */
    .plan-benefits__matrix-head th:not(:first-child) {
        min-width: 12rem;
    }
}

/* ─── PRINT ─────────────────────────────────────────────────────────────── */
@media print {
    .plan-benefits__card {
        box-shadow: none;
        border: 1px solid var(--color-brand-black);
    }

    /* Print always uses the tabular desktop layout. */
    .plan-benefits__matrix thead {
        display: table-header-group;
    }
}