/* =====================================================================
   Public (logged-out) pages: landing, About Us, /quests, /auctions,
   and the logged-out banner. Every class is prefixed "pub-" so nothing
   here collides with app.css, Bootstrap, or page-local styles.
   ===================================================================== */

.pub-page {
    --pub-gold: #caa24b;
    --pub-gold-hi: #ffd86b;
    --pub-gold-lo: #e4b951;
    --pub-ink: #ece9e2;
    --pub-ink-muted: rgba(236, 233, 226, 0.7);
    --pub-bg: #1a1d21;
    --pub-panel: rgba(24, 27, 31, 0.72);
    --pub-border: rgba(202, 162, 75, 0.35);

    color: var(--pub-ink);
    font-family: 'Garamond', 'Georgia', serif;
    line-height: 1.5;
}

    .pub-page h1,
    .pub-page h2,
    .pub-page h3 {
        color: var(--pub-gold-hi);
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .pub-page p {
        color: var(--pub-ink);
    }

    /* Routes.razor focuses the page h1 after navigation (FocusOnNavigate); keep the focus for
       screen readers but do not draw a ring around a non-interactive heading. */
    .pub-page h1:focus,
    .pub-page h1:focus-visible {
        outline: none;
    }

.pub-section {
    padding: 3.5rem 1rem;
}

.pub-container {
    max-width: 1100px;
    margin: 0 auto;
}

.pub-center {
    text-align: center;
}

/* ---------- Buttons ---------- */

.pub-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, var(--pub-gold-hi), var(--pub-gold-lo));
    color: #1a1205 !important;
    font-weight: 700;
    border: 0;
    border-radius: 0.75rem;
    padding: 0.7rem 1.4rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(228, 185, 81, 0.35);
    transition: transform 120ms ease, filter 120ms ease;
    white-space: nowrap;
}

    .pub-btn-cta:hover,
    .pub-btn-cta:focus-visible {
        filter: brightness(1.06);
        transform: translateY(-1px);
        color: #1a1205 !important;
    }

.pub-btn-lg {
    font-size: 1.25rem;
    padding: 0.9rem 2rem;
}

/* ---------- Landing page ground beneath the hero ---------- */

/* Dark slate in the same gray-blue family as the navbar (Bootstrap bg-dark, #212529),
   slightly darker where it meets the hero and easing lighter further down. */
.pub-landing,
.pub-quests,
.pub-auctions,
.pub-about {
    background: linear-gradient(180deg, #1b1e22 0%, #1f2327 30%, #212529 70%, #23272b 100%);
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-x: clip;
    /* Cover MainLayout's bottom padding so no neutral gray strip shows under the page. */
    margin-bottom: -3rem;
    padding-bottom: 3rem;
}

/* ---------- Hero ---------- */

/* Asymmetric composition: copy sits left-of-centre, the right side stays open for the artwork. */
.pub-hero {
    position: relative;
    /* Tall enough that the artwork ends just below the fold on a 1080p screen;
       the diagonal fade below carries it into the slate ground. */
    height: calc(100vh - 56px);
    height: calc(100svh - 56px);
    min-height: 600px;
    max-height: 1100px;
    display: flex;
    align-items: flex-start; /* copy sits in the top third; the cut-away wedge below is used by the next section */
    background-color: transparent; /* the page ground shows through the masked-out part of the artwork */
    overflow: hidden;
}

/* Artwork sits behind everything, darkened and very lightly blurred so it reads as atmosphere. */
.pub-hero-picture {
    position: absolute;
    inset: 0;
    display: block;
    /* The artwork is cut along a ~20deg diagonal (lower-left removed, rising to the right) with a
       short feathered edge, plus a soft fade along the bottom, so the page ground shows through
       the cut-away area with no seam at any viewport height. Both masks must agree, hence intersect. */
    -webkit-mask-image:
        linear-gradient(200deg, #000 44%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.45) 56%, rgba(0, 0, 0, 0.18) 62%, transparent 70%),
        linear-gradient(180deg, #000 78%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
    mask-image:
        linear-gradient(200deg, #000 44%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.45) 56%, rgba(0, 0, 0, 0.18) 62%, transparent 70%),
        linear-gradient(180deg, #000 78%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pub-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(0.62) saturate(0.95) blur(1.5px);
    transform: scale(1.03); /* hides the soft edge the blur creates */
}

/* Dark pool behind the copy block on the left, easing to clear on the right, plus a soft
   diagonal fade (higher on the left, lower on the right) into the slate ground below. */
.pub-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 34% 70% at 24% 42%, rgba(10, 12, 15, 0.62) 0%, rgba(10, 12, 15, 0.36) 55%, rgba(10, 12, 15, 0) 100%),
        linear-gradient(90deg, rgba(10, 12, 15, 0.55) 0%, rgba(10, 12, 15, 0.30) 34%, rgba(10, 12, 15, 0) 60%),
        linear-gradient(180deg, rgba(10, 12, 15, 0.28) 0%, rgba(10, 12, 15, 0) 28%);
    pointer-events: none;
    /* The darkening fades out before the hero ends, so it never draws a line at the bottom edge. */
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 82%);
}

.pub-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 11vh 1.5rem 3rem;
}

.pub-hero-copy {
    max-width: 620px;
    text-align: left;
}

.pub-hook {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
    margin: 0 0 0.9rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}


    .pub-hook-line {
        display: inline;
    }

.pub-sub {
    font-size: clamp(1.05rem, 1.45vw, 1.15rem);
    line-height: 1.5;
    color: var(--pub-ink);
    margin: 0 0 1.5rem;
    max-width: 540px; /* two full lines at desktop sizes */
    text-wrap: pretty;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.pub-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 1rem;
}

/* Quiet secondary CTA: outline, sits beside the gold primary. */
.pub-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border: 1px solid rgba(236, 233, 226, 0.55);
    border-radius: 0.75rem;
    color: var(--pub-ink) !important;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(10, 12, 15, 0.25);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    transition: border-color 120ms ease, background 120ms ease;
    white-space: nowrap;
}

    .pub-btn-secondary:hover,
    .pub-btn-secondary:focus-visible {
        border-color: var(--pub-gold-hi);
        background: rgba(202, 162, 75, 0.14);
        color: var(--pub-gold-hi) !important;
    }

/* ---------- Video ---------- */

.pub-video-section {
    position: relative;
    z-index: 2;
    /* Rises a fixed distance into the cut-away lower-left wedge of the hero, which is plain
       background there; a fixed value keeps the centred video column clear of the artwork
       on tall screens too. */
    margin-top: -240px;
    padding-top: 0;
}

.pub-video-heading {
    text-align: center;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 600;
    margin: 0 auto 1.25rem;
    max-width: 720px;
    color: var(--pub-gold-hi);
}

    /* Faint, wide amber glow centred behind the video card. */
    .pub-video-section::before {
        content: "";
        position: absolute;
        left: -30%;
        right: -30%;
        top: -12%;
        bottom: -12%;
        background: radial-gradient(ellipse 55% 60% at 50% 48%, rgba(228, 172, 74, 0.085) 0%, rgba(228, 172, 74, 0.035) 40%, rgba(228, 172, 74, 0) 72%);
        pointer-events: none;
        z-index: 0;
    }

    .pub-video-section > * {
        position: relative;
        z-index: 1;
    }

.pub-video-frame {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--pub-border);
    background: var(--pub-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

    .pub-video-frame iframe,
    .pub-video-frame video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.pub-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: radial-gradient(ellipse at center, rgba(202, 162, 75, 0.18) 0%, rgba(26, 29, 33, 0.95) 70%);
    color: var(--pub-ink);
}

.pub-video-placeholder {
    cursor: default;
}

/* Thumbnail behind the play button; darkened a little so the gold button and label stay readable. */
.pub-video-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.72);
    transition: filter 150ms ease;
}

.pub-video-poster:hover .pub-video-poster-img,
.pub-video-poster:focus-visible .pub-video-poster-img {
    filter: brightness(0.82);
}

.pub-video-poster .pub-play,
.pub-video-poster .pub-video-poster-text {
    position: relative;
    z-index: 1;
}

.pub-video-poster .pub-video-poster-text {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.pub-play {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--pub-gold-hi), var(--pub-gold-lo));
    box-shadow: 0 8px 22px rgba(228, 185, 81, 0.4);
}

    .pub-play::after {
        content: "";
        display: block;
        margin-left: 6px;
        border-style: solid;
        border-width: 16px 0 16px 28px;
        border-color: transparent transparent transparent #1a1205;
    }

.pub-video-poster-text {
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-gold);
}

.pub-caption {
    text-align: center;
    color: var(--pub-ink-muted);
    margin: 1rem auto 0;
    font-style: italic;
}

/* ---------- Pitch blocks ---------- */

.pub-pitch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pub-pitch {
    background: var(--pub-panel);
    border: 1px solid var(--pub-border);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    backdrop-filter: blur(6px);
}

    .pub-pitch h2 {
        font-size: 1.6rem;
        margin: 0 0 0.6rem;
    }

    .pub-pitch p {
        margin: 0;
        font-size: 1.1rem;
        color: var(--pub-ink);
    }

/* ---------- Testimonials ---------- */

.pub-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pub-testimonial {
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pub-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .pub-testimonial blockquote {
        margin: 0;
        font-size: 1.15rem;
        font-style: italic;
        color: var(--pub-ink);
    }

        .pub-testimonial blockquote::before {
            content: "\201C";
            color: var(--pub-gold);
            font-size: 2rem;
            line-height: 0;
            margin-right: 0.25rem;
            vertical-align: -0.4em;
        }

    .pub-testimonial figcaption {
        color: var(--pub-gold-hi);
        font-weight: 700;
    }

.pub-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--pub-border);
    color: var(--pub-ink-muted);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Editorial marker showing which brief placeholder a card is. Remove when copy is final. */
.pub-placeholder-tag {
    display: block;
    font-size: 0.7rem;
    color: var(--pub-ink-muted);
    letter-spacing: 0.04em;
}

/* ---------- Close ---------- */

.pub-close {
    text-align: center;
    padding-bottom: 5rem;
}

.pub-close-sub {
    margin: 1.1rem 0 0;
    color: var(--pub-ink);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------- Logged-out banner ---------- */

.pub-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(202, 162, 75, 0.18), rgba(202, 162, 75, 0.08));
    border-top: 1px solid var(--pub-border);
    border-bottom: 1px solid var(--pub-border);
    color: var(--pub-ink);
    font-size: 1.05rem;
}

    .pub-banner .pub-btn-cta {
        padding: 0.4rem 1rem;
        font-size: 0.95rem;
    }

/* ---------- Page headers (About, Quests, Auctions) ---------- */

.pub-page-header {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
}

    .pub-page-header h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        margin: 0 0 0.5rem;
    }

    .pub-page-header p {
        color: var(--pub-ink-muted);
        font-size: 1.15rem;
        max-width: 640px;
        margin: 0 auto;
    }

.pub-about-section {
    background: var(--pub-panel);
    border: 1px solid var(--pub-border);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    margin-bottom: 1.5rem;
}

    .pub-about-section h2 {
        font-size: 1.75rem;
        margin: 0 0 0.75rem;
    }

    .pub-about-section p {
        font-size: 1.1rem;
        margin: 0;
    }

.pub-empty {
    text-align: center;
    color: var(--pub-ink-muted);
    font-size: 1.15rem;
    padding: 3rem 1rem;
}

/* ---------- About Us ---------- */

/* Opening line: a strong statement, not a preamble. */
.pub-about .pub-page-header p {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    line-height: 1.45;
    color: var(--pub-ink);
    max-width: 760px;
}

.pub-about-sections {
    padding: 1rem 1rem 1.5rem;
}

/* Mission stands on its own: centred, larger, no body paragraph competing with it. */
.pub-about-mission {
    text-align: center;
    padding: 2.5rem 2rem;
}

    .pub-about-mission h2 {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--pub-gold);
        margin-bottom: 1rem;
    }

.pub-about-mission .pub-about-mission-text {
    font-size: clamp(1.25rem, 1.7vw, 1.45rem); /* a step above the other cards' 1.1rem body text */
    line-height: 1.4;
    color: var(--pub-ink);
    max-width: 720px;
    margin: 0 auto;
    text-wrap: balance;
}

.pub-about-staff-intro {
    margin-bottom: 1.5rem;
    color: var(--pub-ink-muted);
}

.pub-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 x 2 for six people at desktop widths */
    gap: 1rem;
}

.pub-staff-card {
    padding: 1.15rem 1.2rem 1.25rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(202, 162, 75, 0.22);
    border-left: 3px solid rgba(202, 162, 75, 0.6);
    border-radius: 0.75rem;
}

.pub-staff-name {
    font-size: 1.2rem;
    margin: 0 0 0.15rem;
}

.pub-staff-role {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-gold);
    margin-bottom: 0.6rem;
}

.pub-staff-blurb {
    font-size: 0.98rem;
    line-height: 1.45;
    margin: 0;
    color: var(--pub-ink-muted);
}

.pub-staff-more {
    margin-top: 1.5rem;
    text-align: center;
}

.pub-about-final {
    padding-top: 1.5rem;
}

.pub-about-final-text {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    color: var(--pub-gold-hi);
    margin: 0 auto 1.5rem;
    max-width: 640px;
    text-wrap: balance;
}

/* ---------- Public quest discovery cards (/quests) ---------- */

.pub-qgrid-wrap {
    padding: 1rem 1rem 2.5rem;
}

.pub-qgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.pub-qcard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.6rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%), var(--pub-panel);
    border: 1px solid var(--pub-border);
    border-top: 2px solid rgba(202, 162, 75, 0.55);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transition: border-color 150ms ease, transform 150ms ease;
}

    @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
    .pub-qcard:hover {
        border-color: rgba(202, 162, 75, 0.6);
        transform: translateY(-2px);
    }
    }

.pub-qcard-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}

.pub-qcard-title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
    color: var(--pub-gold-hi);
}

.pub-qcard-teaser {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--pub-ink);
    text-wrap: pretty;
}

.pub-qcard-meta {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid rgba(202, 162, 75, 0.18);
    display: grid;
    gap: 0.45rem;
    font-size: 0.98rem;
    color: var(--pub-ink-muted);
}

    .pub-qcard-meta li {
        display: flex;
        align-items: baseline;
        gap: 0.55rem;
    }

    .pub-qcard-meta .bi {
        color: var(--pub-gold);
        font-size: 0.95rem;
        flex: 0 0 1.1rem;
        text-align: center;
    }

    .pub-qcard-meta .event-time {
        color: var(--pub-ink);
    }

.pub-qcard-muted {
    color: var(--pub-ink-muted);
    margin-left: 0.35rem;
}

.pub-qcard-status {
    color: var(--pub-gold);
    font-weight: 600;
}

/* Full or closed tables stay readable but step back from the open ones. */
.pub-qcard.is-closed {
    border-top-color: rgba(202, 162, 75, 0.22);
    background: var(--pub-panel);
    box-shadow: none;
}

    .pub-qcard.is-closed .pub-qcard-title {
        color: rgba(255, 216, 107, 0.7);
    }

    .pub-qcard.is-closed .pub-qcard-teaser {
        color: var(--pub-ink-muted);
    }

    @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
    .pub-qcard.is-closed:hover {
        transform: none;
        border-color: var(--pub-border);
    }
    }

/* ---------- Public auction house (/auctions): same cards as /quests, plus rarity and kind ---------- */

.pub-group-heading {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-gold);
    margin: 0.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(202, 162, 75, 0.25);
}

    .pub-group-heading + .pub-qgrid {
        margin-bottom: 2.5rem;
    }

.pub-group-heading-consumable {
    color: #8fd3c4;
    border-bottom-color: rgba(143, 211, 196, 0.25);
}

/* Consumables and potions: same card, cooler edge so they read as their own family. */
.pub-qcard.is-consumable {
    border-top-color: rgba(143, 211, 196, 0.6);
    background: linear-gradient(180deg, rgba(143, 211, 196, 0.06) 0%, rgba(143, 211, 196, 0.015) 100%), var(--pub-panel);
}

    .pub-qcard.is-consumable:hover {
        border-color: rgba(143, 211, 196, 0.5);
    }

.pub-acard-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.9rem;
    color: var(--pub-ink-muted);
}

/* Rarity as a small coloured dot plus label, instead of coloured borders and badges. */
.pub-rarity {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .pub-rarity i {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        background: #9ca3af;
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    }

    .pub-rarity.rarity-common i { background: #9ca3af; }
    .pub-rarity.rarity-uncommon i { background: #5fcf7a; }
    .pub-rarity.rarity-rare i { background: #6fb3ff; }
    .pub-rarity.rarity-very-rare i { background: #b58cff; box-shadow: 0 0 8px rgba(181, 140, 255, 0.45); }
    .pub-rarity.rarity-legendary i { background: #ffd86b; box-shadow: 0 0 8px rgba(255, 216, 107, 0.55); }
    .pub-rarity.rarity-artifact i { background: #ff7b7b; box-shadow: 0 0 8px rgba(255, 123, 123, 0.55); }

.pub-kind-tag {
    color: #8fd3c4;
}

.pub-qty-tag {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    font-size: 0.8rem;
}

.pub-qcard-meta strong {
    color: var(--pub-ink);
    font-weight: 600;
}

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    .pub-hook-line {
        white-space: normal;
    }

    .pub-section {
        padding: 2.5rem 1rem;
    }

    .pub-hero {
        height: auto;
        min-height: 440px;
    }

    .pub-hero {
        align-items: center;
    }

    .pub-hero-inner {
        padding: 2.5rem 1.25rem 3rem;
    }

    .pub-video-section {
        margin-top: 0;
        padding-top: 2rem;
    }

    .pub-hero-overlay {
        background:
            linear-gradient(180deg, rgba(10, 12, 15, 0.45) 0%, rgba(10, 12, 15, 0.4) 100%);
    }

    .pub-btn-secondary {
        width: 100%;
        max-width: 360px;
    }

    .pub-btn-lg {
        width: 100%;
        max-width: 360px;
    }

    .pub-qgrid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-btn-cta {
        transition: none;
    }
}