/* ==========================================================================
   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));
}

/* 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;
}