/* ==========================================================================
   Modal Utilities (deferred)
   ========================================================================== */

/* Modal Close Button */
.modal-close {
   position: absolute;
   top: 1em;
   right: 1em;
   width: 2.5em;
   height: 2.5em;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: var(--modal-close-bg, transparent);
   color: var(--modal-close-color, var(--grey-dark));
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
   z-index: 10;
}

.modal-close svg {
   width: 100%;
   height: auto;
}

/* Pill Button */
.btn-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.75em;
   padding: 1em 2em;
   border-radius: 100px;
   font-weight: var(--fw-bolder, 600);
   font-size: 1em;
   text-decoration: none;
   transition: all 0.3s ease;
   cursor: pointer;
   border: none;
   font-family: inherit;
}

.btn-pill svg {
   width: 1.25em;
   height: 1.25em;
}

.btn-pill--primary {
   background: var(--btn-pill-bg, linear-gradient(135deg, var(--punchline-terracotta) 0%, var(--punchline-terracotta-dark) 100%));
   color: var(--btn-pill-color, white);
   box-shadow: 0 0.25em 1em var(--btn-pill-shadow, hsl(8 55% 51% / 0.3));
}

.btn-pill--primary:hover {
   transform: translateY(-0.125em);
   box-shadow: 0 0.5em 1.5em var(--btn-pill-shadow-hover, hsl(8 55% 51% / 0.4));
   color: var(--btn-pill-color, white);
}

.btn-pill--secondary {
   background: var(--btn-pill-secondary-bg, white);
   color: var(--btn-pill-secondary-color, var(--grey-dark));
   border: 2px solid var(--btn-pill-secondary-border, var(--grey-mid-light));
}

.btn-pill--secondary:hover {
   background: var(--btn-pill-secondary-bg-hover, hsl(30, 20%, 97%));
   transform: translateY(-0.125em);
   border-color: var(--btn-pill-secondary-border-hover, var(--grey-mid));
}

/* Badge Pill */
.badge-pill {
   display: inline-flex;
   align-items: center;
   gap: 0.5em;
   padding: 0.375em 1em;
   background: var(--badge-pill-bg, hsl(8 55% 51% / 0.1));
   color: var(--badge-pill-color, var(--punchline-terracotta));
   border-radius: 100px;
   font-size: 0.75em;
   font-weight: var(--fw-bolder, 600);
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.badge-pill svg {
   width: 1.15em;
   height: 1.15em;
}

/* Card Subtle */
.card-subtle {
   display: grid;
   gap: 1em;
   align-content: start;
   background: var(--card-subtle-bg, hsl(30, 20%, 97%));
   padding: clamp(1.25em, 3vw, 2em);
   border-radius: var(--card-subtle-radius, 1em);
}

/* Heading Caps */
.heading-caps {
   font-weight: var(--fw-bolder, 600);
   font-size: 0.875em;
   text-transform: uppercase;
   letter-spacing: 0.0625em;
   color: var(--heading-caps-color, var(--punchline-terracotta));
   display: flex;
   align-items: center;
   gap: 0.5em;
}

.heading-caps svg {
   width: 1.15em;
   height: 1.15em;
}

/* Media Item (icon + text row) */
.media-item {
   display: flex;
   align-items: center;
   gap: 0.75em;
}

/* Icon Box */
.icon-box {
   width: 2.5em;
   height: 2.5em;
   background: var(--icon-box-bg, white);
   border-radius: var(--icon-box-radius, 0.625em);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.icon-box svg {
   width: 1.125em;
   height: 1.125em;
   color: var(--icon-box-color, var(--punchline-terracotta));
}

/* Grid Auto-fit */
.grid-auto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-auto-min, 16em)), 1fr));
   gap: var(--grid-auto-gap, clamp(1.5em, 3vw, 2em));
}

/* Modal Actions */
.modal-actions {
   display: grid;
   grid-template-columns: repeat(auto-fill, 22rem);
   justify-content: center;
   gap: 1rem;
   padding-top: 1.5rem;
   border-top: 1px solid hsl(30 14% 91%);
}

.modal-actions .btn {
   display: inline-grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   gap: 0.75em;
   border-radius: 100vmax;
   font-weight: var(--fw-semibold, 600);
   font-size: 1rem;
   text-decoration: none;
   transition: all 0.2s;
   cursor: pointer;
   border: none;
   font-family: inherit;
   justify-content: center;
   padding: 0.875em 1.5em;
   border-radius: 0.75rem;
   text-decoration: none;
}

.modal-actions .btn svg {
   width: 1.25em;
   height: 1.25em;
}

.modal-actions .btn-primary {
   display: inline-flex;
   align-items: center;
   font-size: 0.9375rem;
   color: white;
   background: linear-gradient(135deg, var(--punchline-terracotta, hsl(15 60% 50%)) 0%, var(--punchline-terracotta-dark, hsl(15 60% 40%)) 100%);
   box-shadow: 0 0.25rem 1rem var(--punchline-terracotta-shadow, hsl(15 60% 50% / 0.3));
}

.modal-actions .btn-primary:hover {
   background: var(--punchline-terracotta-dark);
   transform: translateY(-1px);
}

.modal-actions .btn-secondary {
   background: white;
   color: var(--foreground, hsl(30 10% 15%));
   border: 2px solid hsl(30 14% 91%);
}

.modal-actions .btn-secondary:hover {
   background: hsl(30 20% 98%);
   transform: translateY(-0.125rem);
   border-color: hsl(30 14% 85%);
}

/* ==========================================================================
   Native <dialog> Modal
   Reusable base for modals using the native <dialog> element.
   Usage: <dialog class="dialog-modal [your-modifier]">
   Override --dialog-max-width per instance for different widths.
   ========================================================================== */

body:has(dialog[open]) {
   overflow: hidden;
}

.dialog-modal {
   overscroll-behavior: contain;
   max-width: var(--dialog-max-width, 48rem);
   width: calc(100% - 2rem);
   max-height: calc(100vh - 4rem);
   margin: auto;
   padding: clamp(1.5rem, 4vw, 3rem);
   border: none;
   border-radius: var(--modal-border-radius, 1rem);
   box-shadow: 0 1rem 3rem hsl(0 0% 0% / 0.2);
   grid-template-rows: auto 1fr;
   overflow: hidden;
   opacity: 0;
   transform: translateY(1rem);
   transition: opacity 0.3s ease, transform 0.3s ease, overlay 0.3s ease allow-discrete, display 0.3s ease allow-discrete;
}

.dialog-modal[open] {
   display: grid;
   opacity: 1;
   transform: translateY(0);
}

@starting-style {
   .dialog-modal[open] {
      opacity: 0;
      transform: translateY(1rem);
   }
}

.dialog-modal::backdrop {
   background: hsl(0 0% 0% / 0);
   transition: background 0.3s ease, overlay 0.3s ease allow-discrete, display 0.3s ease allow-discrete;
}

.dialog-modal[open]::backdrop {
   background: hsl(0 0% 0% / 0.5);
}

@starting-style {
   .dialog-modal[open]::backdrop {
      background: hsl(0 0% 0% / 0);
   }
}

.dialog-modal .dialog-header {
   padding: 0;
   text-align: center;
   margin-bottom: 1.5em;
}

.dialog-modal .dialog-title {
   font-family: var(--ff-serif, Georgia, serif);
   font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
   font-weight: 500;
   margin: 0;
}

.dialog-modal .dialog-body {
   min-height: 0;
   overflow-y: scroll;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: hsl(0 0% 75%) hsl(0 0% 93%);
}

.dialog-modal .dialog-body::-webkit-scrollbar {
   width: 20px;
   background-color: hsl(0 0% 93%);
}

.dialog-modal .dialog-body::-webkit-scrollbar-track {
   background-color: hsl(0 0% 93%);
   border-radius: 20px;
}

.dialog-modal .dialog-body::-webkit-scrollbar-thumb {
   background-color: hsl(0 0% 75%);
   border-radius: 20px;
   border: 7px solid hsl(0 0% 93%);
   background-clip: content-box;
}

@media (max-width: 37.5em) {
   .dialog-modal {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: clamp(1.25rem, 4vw, 2rem);
      border-radius: 0;
   }
}

/* Embed Rounded */
.embed-rounded {
   border-radius: var(--embed-rounded-radius, 1em);
   overflow: hidden;
   height: var(--embed-rounded-height, clamp(12em, 25vw, 18em));
   box-shadow: 0 0.25em 0.75em hsl(0 0% 0% / 0.1);
}

.embed-rounded iframe,
.embed-rounded video,
.embed-rounded img {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
}

/* ==========================================================================
   Dialog Panel — Pane Slider
   Multi-step flows inside modals. Requires scripts/dialog-panel.js
   ========================================================================== */

/* Slider — wraps content; becomes horizontal track when panes are present */
.dialog-panel__slider {
   padding: 0;
}

.dialog-panel__slider:has(> [data-pane]) {
   display: flex;
   padding: 0;
   transition: transform 0.3s ease;
}

.dialog-panel__slider > [data-pane] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   flex: 0 0 100%;
   min-width: 0;
   padding: clamp(1rem, 3vw, 1.5rem);
   overflow-y: auto;
}

/* Pane header — back button + title row inside a pane */
.dialog-panel__pane-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding-block-end: 0.75rem;
   border-block-end: 1px solid var(--grey-mid-light, hsl(0 0% 85%));
   margin-block-end: 0.5rem;
}

.dialog-panel__pane-header > :last-child {
   flex: 1;
   font-family: var(--ff-semibold, inherit);
   font-size: var(--fs-h4, 1.125rem);
}

/* Back button */
.dialog-panel__back {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.375rem 0.5rem;
   font-size: 0.875rem;
   border: none;
   background: transparent;
   border-radius: 0.375rem;
   cursor: pointer;
   color: var(--grey-dark, hsl(0 0% 30%));
   transition: background-color 0.2s ease;
}

.dialog-panel__back:hover {
   background-color: var(--grey-light, hsl(0 0% 95%));
}

.dialog-panel__back svg {
   width: 1.25em;
   height: 1.25em;
}