/* ═══════════════════════════════════════════════════════════════════════════
   Price Table — pemfit/price-table
   Loaded on the front end AND in the editor canvas (same file).

   Selector strength is kept deliberately LOW (single classes) so the shared
   controls always win without fighting: Typography "all text" and the
   per-part panels (Headings, Column 1–4) both override everything here.
   Order of precedence: highlighted text > Typography part > Typography all
   text > the column's own alignment / these defaults.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-pt {
    --pf-pt-head-bg-default: rgba(245, 242, 238, 0.14);
    --pf-pt-body-bg-default: rgba(245, 242, 238, 0.06);
    --pf-pt-divider-default: rgba(245, 242, 238, 0.12);
    --pf-pt-pad-y: clamp(1.1rem, calc(1.1rem + 7 * (100vw - 400px) / (2000 - 400)), 1.8rem);
    --pf-pt-pad-x: clamp(1.6rem, calc(1.6rem + 10 * (100vw - 400px) / (2000 - 400)), 2.6rem);

    width: auto;
    align-self: stretch;
    box-sizing: border-box;
    color: var(--off-white, #F5F2EE);
    background: var(--pf-pt-body-bg, var(--pf-pt-body-bg-default));
    border-radius: var(--rounded-corners, 1.6rem);
    overflow: hidden;
}
.pf-pt.pf-pt-size-compact {
    --pf-pt-pad-y: clamp(0.8rem, calc(0.8rem + 5 * (100vw - 400px) / (2000 - 400)), 1.3rem);
}
.pf-pt.pf-pt-size-roomy {
    --pf-pt-pad-y: clamp(1.6rem, calc(1.6rem + 10 * (100vw - 400px) / (2000 - 400)), 2.6rem);
}

.pf-pt-grid {
    display: grid;
    grid-template-columns: repeat(var(--pf-pt-cols, 2), minmax(0, 1fr));
}

/* Desktop placement: cells are output column by column; --c / --r put them
   back into rows so dividers run straight across. */
.pf-pt-cell {
    grid-column: var(--c);
    grid-row: var(--r);
    padding: var(--pf-pt-pad-y) var(--pf-pt-pad-x);
    font-family: var(--DM-Sans);
    font-size: clamp(1.4rem, calc(1.4rem + 3 * (100vw - 400px) / (2000 - 400)), 1.7rem);
    line-height: 1.35;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Column alignment (set per column in the Columns panel). */
.pf-pt-a-left   { text-align: left; }
.pf-pt-a-center { text-align: center; }
.pf-pt-a-right  { text-align: right; }

/* Heading row */
.pf-pt-head {
    background: var(--pf-pt-head-bg, var(--pf-pt-head-bg-default));
    font-weight: 600;
    padding-top: calc(var(--pf-pt-pad-y) * 1.2);
    padding-bottom: calc(var(--pf-pt-pad-y) * 1.2);
}

/* Items — divider under every row (also under empty cells, so the line
   runs the full width when one column is shorter). */
.pf-pt-item {
    border-bottom: 1px solid var(--pf-pt-divider, var(--pf-pt-divider-default));
    font-weight: 400;
}
/* Every column's items look the same by default; change any one column
   with Typography — Column 1–4 (or all of them with "all text"). */

/* Phones: columns stack — column 1's heading and items, then column 2's. */
@media (max-width: 600px) {
    .pf-pt-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-pt-cell { grid-column: auto; grid-row: auto; }
    .pf-pt-empty { display: none; }
}

/* ── Editor ───────────────────────────────────────────────────────────────
   This selector also makes Gutenberg copy the file into the iframed canvas
   (it only copies sheets containing .editor-styles-wrapper). */
.editor-styles-wrapper .pf-pt-cell:focus {
    outline: 1px dashed rgba(245, 242, 238, 0.5);
    outline-offset: -4px;
}

/* ── Width, side margins and centring ────────────────────────────────────
   The block's render (and its editor code) copies the Spacing & Size
   "Margin left / right" and "Max width" values into --pf-pt-ml / -mr /
   -max. Each side margin is then the LARGER of:
     • your fixed margin, and
     • half the space left over once the table is at its max width.
   So on smaller screens your margin is the gap either side; on wide screens
   the table stops at its max width and stays centred. A plain fixed margin
   used to replace the auto margins that centre a max-width box, which is
   why it sat to one side on large screens.
   !important + doubled class: these must beat the plain margin / max-width
   the shared controls also put inline (and, in the editor, the layout rules
   that force side margins to auto with !important). */
.wp-block-pemfit-price-table.pf-pt {
    max-width: none !important;
    margin-left:  max( var(--pf-pt-ml, 0px), calc( ( 100% - var(--pf-pt-max, 120rem) ) / 2 ) ) !important;
    margin-right: max( var(--pf-pt-mr, 0px), calc( ( 100% - var(--pf-pt-max, 120rem) ) / 2 ) ) !important;
}