/**
 * Advertising section
 *
 * The vocabulary the "WEEU Advertising" block patterns are built from:
 * full-width sections, a contained column, offering cards, a stat band,
 * ecosystem chips, a logo row, statement and call-to-action bands, a
 * split (media + text) layout, and the campaign form. Every colour and
 * size is a design token, so the section restyles with the Customizer.
 *
 * Loaded on the Advertising Page template and in the block editor.
 *
 * @package WEEU830
 * @since   2.47.0
 */

/* ---- Page ---- */

.adv-page .weeu-page-hero {
    margin-bottom: 0;
}

.adv-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* WordPress wraps a group's blocks in an inner container (this theme has
   no theme.json), which would leave every grid and flex rule below with a
   single child. The wrapper is made transparent to layout, so the blocks
   themselves are the grid items, card contents and chips. The editor
   renders groups without the wrapper, so nothing changes there. */
.adv-section .wp-block-group__inner-container {
    display: contents;
}

/* ---- Sections ---- */

/* Two sections of the same tone in a row read as one surface, so they
   share one gap rather than stacking bottom padding on top padding. */
.adv-section:not([class*="adv-section--"]) + .adv-section:not([class*="adv-section--"]),
.adv-section--alt + .adv-section--alt,
.adv-section--dark + .adv-section--dark {
    padding-top: 0;
}

/* The map section opens straight on its two columns; no heading above
   them to space away from. */
.adv-coverage .adv-split {
    margin-top: 0;
}

.adv-section {
    padding-block: 72px;
    background: var(--color-background);
    color: var(--color-text);
}

.adv-section--alt {
    background: var(--color-background-alt);
}

.adv-section--dark {
    background: var(--color-dark-surface);
    color: var(--color-text-on-dark, #fff);
}

.adv-section--dark h2,
.adv-section--dark h3,
.adv-section--dark p {
    color: inherit;
}

.adv-section--brand {
    background: var(--gradient-primary, var(--color-primary));
    color: var(--color-on-primary, #fff);
}

.adv-section--brand h2,
.adv-section--brand h3,
.adv-section--brand p {
    color: inherit;
}

.adv-section--tight {
    padding-block: 48px;
}

.adv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding, 20px);
}

.adv-container--narrow {
    max-width: 800px;
}

/* ---- Type ---- */

.adv-eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.adv-section--dark .adv-eyebrow,
.adv-section--brand .adv-eyebrow {
    color: inherit;
    opacity: 0.85;
}

.adv-section h2.adv-title,
.adv-section h2 {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: var(--font-size-display-sm, 2.25rem);
    line-height: 1.12;
    color: var(--color-heading);
    text-wrap: balance;
}

.adv-section--dark h2,
.adv-section--brand h2 {
    color: inherit;
}

.adv-lede {
    font-size: var(--font-size-xl);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 760px;
    margin: 0 0 28px;
}

.adv-section--dark .adv-lede,
.adv-section--brand .adv-lede {
    color: inherit;
    opacity: 0.92;
}

.adv-centered {
    text-align: center;
}

.adv-centered .adv-lede {
    margin-inline: auto;
}

.adv-centered .wp-block-buttons {
    justify-content: center;
}

.adv-section p:last-child {
    margin-bottom: 0;
}

/* The intro under the hero: the lede and one button. */
.adv-intro .adv-lede {
    font-size: var(--font-size-xl);
    color: var(--color-text);
}

/* ---- Buttons (core button blocks inside the section) ---- */

/* A call to action in an advertising section is centred, full stop —
   whatever the Buttons block's own justification says (pages made from
   the first patterns carry "left", and WordPress's per-block layout CSS
   restates it), at a weight that beats both. The one place a button
   follows its text instead is inside a two-column split, where the text
   column is left-aligned.

   It is a flex row here, not only when WordPress prints its per-block
   layout CSS: without that CSS the row is a plain block and
   justify-content does nothing, which left the button in any section
   that is not text-centred (High School Sports) at the left. */
.adv-section .wp-block-buttons.wp-block-buttons,
.adv-section .wp-block-buttons.wp-block-buttons.is-content-justification-left,
.adv-section .wp-block-buttons.wp-block-buttons.is-content-justification-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center !important;
    margin-top: 28px;
}

/* A button inside one column of a two-column split is lifted out of the
   column and set centred beneath both columns — where a call to action
   for the whole block belongs — without the block having to move. The
   split reserves the room at its foot. */
.adv-split:has(.wp-block-buttons, .wp-block-button) {
    position: relative;
    padding-bottom: 96px;
}

.adv-section .adv-split .wp-block-buttons.wp-block-buttons,
.adv-section .adv-split .wp-block-button.wp-block-button:not(.wp-block-buttons > *) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    justify-content: center !important;
    text-align: center !important;
}

/* A Buttons block set to vertical stacks its buttons; centre those too. */
.adv-section .wp-block-buttons.wp-block-buttons.is-vertical {
    align-items: center !important;
}

/* A lone Button block dropped straight into a section, with no Buttons
   wrapper around it — what the editor makes when a button is added on its
   own — is a full-width box holding an inline link: centre the link. */
.adv-section .wp-block-button.wp-block-button {
    text-align: center !important;
}

.adv-section .wp-block-buttons > .wp-block-button.wp-block-button {
    text-align: inherit !important;
}

/* And a button inside a flex-layout Group (rather than a Buttons block). */
.adv-section .wp-block-group.is-layout-flex:has(> .wp-block-button) {
    justify-content: center !important;
}

/* One box however many lines the label wraps to on a phone; as an inline
   link each wrapped line drew its own pill, overlapping the next. */
.adv-section .wp-block-button__link {
    display: inline-block;
    max-width: 100%;
    line-height: 1.35;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    padding: 16px 28px;
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.adv-section .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.adv-section--brand .wp-block-button__link {
    background: var(--color-surface);
    color: var(--color-primary);
}

/* ---- Offering cards ---- */

.adv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.adv-cards--3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.adv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    padding: 32px 28px 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Cards in a row line their lists up: the spare height in a card goes to
   the sentence above the list, so every list in the row starts at the same
   point however many lines each sentence runs to.

   The eyebrow and the "Explore…" link are paragraphs too, and were sharing
   that spare height with the sentence three ways — which is what left one
   card's list sitting higher than its neighbours'. Only the sentence
   stretches now.

   Deliberately not a grid: a card's parts vary from page to page, and a
   rule that assumes a fixed number of them drops the last part on top of
   the one before it. A flex column cannot overlap whatever it is given.

   The block editor sometimes wraps a group's children in an inner
   container and sometimes emits them directly; the first rule makes both
   shapes behave the same. */
.adv-card > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.adv-card p.adv-eyebrow,
.adv-card p.adv-card-link {
    flex: 0 0 auto;
}

.adv-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.adv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.adv-card:hover::before {
    opacity: 1;
}

.adv-card .adv-eyebrow {
    margin-bottom: 4px;
}

.adv-card h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    line-height: 1.2;
    color: var(--color-heading);
}

.adv-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
    flex: 1 1 auto;
}

.adv-card .adv-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-size: 22px;
    margin-bottom: 6px;
}

/* A link at the foot of a card: "→ Explore Radio Advertising". */
.adv-card .adv-card-link,
.adv-card p.adv-card-link a {
    margin-top: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

.adv-card p.adv-card-link a::after {
    content: " \2192";
}

.adv-card p.adv-card-link a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Cards on a dark section. */
.adv-section--dark .adv-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.adv-section--dark .adv-card h3,
.adv-section--dark .adv-card p {
    color: inherit;
}

.adv-section--dark .adv-card p {
    opacity: 0.85;
}

/* ---- Stat band ---- */

.adv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.adv-stat {
    text-align: left;
    padding: 28px 24px;
    border-left: 4px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: 0 12px 12px 0;
}

.adv-section--dark .adv-stat {
    background: rgba(255, 255, 255, 0.06);
}

.adv-stat p {
    margin: 0;
}

.adv-stat .adv-stat-num,
.adv-stat p.adv-stat-num {
    font-family: var(--font-heading);
    font-size: var(--font-size-display, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.adv-section--dark .adv-stat p.adv-stat-num {
    color: inherit;
}

.adv-stat .adv-stat-label,
.adv-stat p.adv-stat-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.3;
    color: var(--color-heading);
}

.adv-section--dark .adv-stat p.adv-stat-label {
    color: inherit;
    opacity: 0.9;
}

.adv-stat .adv-stat-note,
.adv-stat p.adv-stat-note {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.adv-section--dark .adv-stat p.adv-stat-note {
    color: inherit;
    opacity: 0.7;
}

/* One big number standing alone (the 130,000+ line). */
.adv-bignum {
    text-align: center;
    padding: 36px 20px;
    margin-top: 36px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.adv-bignum p {
    margin: 0;
}

.adv-bignum p.adv-stat-num {
    font-family: var(--font-heading);
    font-size: var(--font-size-display-lg, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.adv-bignum p.adv-stat-label {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-heading);
}

/* On a dark band the number stays brand red; its caption and rules lighten. */
.adv-section--dark .adv-bignum {
    border-top-color: rgba(255, 255, 255, 0.16);
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.adv-section--dark .adv-bignum p.adv-stat-label {
    color: inherit;
    opacity: 0.92;
}

/* ---- Statement band ("Locally Owned. Locally Operated. Locally Invested.") ---- */

.adv-statement h2 {
    font-size: var(--font-size-display-sm, 2.25rem);
}

.adv-statement .adv-lede {
    font-size: var(--font-size-xl);
}

/* ---- Ecosystem chips ---- */

.adv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.adv-chips p,
.adv-chip {
    margin: 0;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.adv-section--dark .adv-chips p {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: inherit;
}

.adv-chips.adv-centered {
    justify-content: center;
}

/* ---- Logo row ---- */

.adv-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 56px;
    margin: 36px 0;
}

.adv-logos img,
.adv-logo img {
    height: 88px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.adv-logos .adv-logo-name {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ---- Split (media + text) ---- */

.adv-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}

.adv-split .adv-split-media {
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-background-alt);
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-split .adv-split-media img,
.adv-split .adv-split-media iframe,
.adv-split .adv-split-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.adv-split .adv-split-media .wp-block-embed,
.adv-split .adv-split-media figure {
    width: 100%;
    margin: 0;
}

/* A map (or any picture that should simply be the picture): no card
   behind it, no rounded corners, no minimum height — the image fills its
   column edge to edge and scales with it. The map is given the wider of
   the two columns. */
.adv-split--map {
    grid-template-columns: minmax(320px, 3fr) minmax(300px, 2fr);
    align-items: center;
}

.adv-split--map .adv-split-media,
.adv-split--map .adv-split-media.adv-split-media--plain {
    background: none;
    border-radius: 0;
    min-height: 0;
    overflow: visible;
    display: block;
}

.adv-split--map .adv-split-media img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.adv-split--map .adv-split-media figure,
.adv-split--map .adv-split-media .wp-block-image {
    margin: 0;
    width: 100%;
}

.adv-split--map .adv-split-media figcaption {
    margin: 8px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: left;
}

/* A photo beside the text (the high school crew on Sports Advertising):
   the picture is the picture, cropped to fill its rounded frame, with no
   grey card showing around it. */
.adv-split--photo {
    margin-top: 0;
}

.adv-split--photo .adv-split-media {
    background: none;
    min-height: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.adv-split--photo .adv-split-media figure,
.adv-split--photo .adv-split-media .wp-block-image {
    margin: 0;
    width: 100%;
}

.adv-split--photo .adv-split-media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.adv-split--photo .adv-list {
    margin-top: 0;
}

/* The row of crests that opens Sports Advertising: the logos are the
   section, so no extra margin above and below them. */
.adv-team-strip .adv-logos {
    margin: 0;
}

/* A logo row built from Image blocks (each crest an image, its caption the
   team's name) so a logo can be replaced, renamed, reordered or added in
   the editor. Sized like the shortcode's row; the selectors outweigh
   core's own .wp-block-image img rule. */
.adv-logos .wp-block-image {
    margin: 0;
}

.adv-logos .wp-block-image img {
    height: 96px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin-inline: auto;
}

.adv-logos .wp-block-image figcaption {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (max-width: 860px) {
    .adv-split--map {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the map leads. */
    .adv-split--map .adv-split-media {
        order: -1;
    }
}

/* ---- Checklist ---- */

.adv-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 32px;
}

.adv-list li {
    position: relative;
    padding-left: 30px;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.adv-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Call to action band ---- */

.adv-cta {
    text-align: center;
}

.adv-cta h2 {
    margin-bottom: 12px;
}

.adv-cta .adv-lede {
    margin-inline: auto;
}

.adv-cta .wp-block-buttons {
    justify-content: center;
    margin-top: 24px;
}

/* ---- Sub-sections with a number ("6 Local Teams…") ---- */

.adv-subsection {
    padding-block: 48px;
    border-top: 1px solid var(--color-border);
}

.adv-subsection:first-child {
    border-top: 0;
}

.adv-section--dark .adv-subsection {
    border-top-color: rgba(255, 255, 255, 0.14);
}

/* ---- Campaign form ---- */

.adv-form-wrap {
    max-width: 720px;
    margin: 40px auto 0;
    padding: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.adv-form {
    text-align: left;
}

.adv-form .adv-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.adv-form .adv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.adv-form .adv-field label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-heading);
}

.adv-form .adv-field label .req {
    color: var(--color-primary);
}

.adv-form input[type="text"],
.adv-form input[type="email"],
.adv-form input[type="tel"],
.adv-form textarea {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.adv-form input:focus,
.adv-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.adv-form textarea {
    min-height: 130px;
    resize: vertical;
}

.adv-form .adv-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.adv-form .adv-interests label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-background);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-heading);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.adv-form .adv-interests label:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.adv-form .adv-interests input {
    accent-color: var(--color-primary);
}

.adv-form .adv-field-optional {
    font-weight: 400;
    color: var(--color-text-muted);
}

.adv-form .adv-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The fields stay left-aligned, as fields should be; the button that ends
   the form is centred under them. */
.adv-form .adv-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.adv-form .adv-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.adv-form .adv-submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.adv-form .adv-submit[disabled] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.adv-form .adv-form-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.adv-form .adv-form-message {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.adv-form .adv-form-message.is-error {
    background: #fdecec;
    color: #9b1c1c;
}

.adv-form .adv-form-message.is-success {
    background: #e6f6ea;
    color: #14622a;
}

.adv-form-thanks {
    text-align: center;
    padding: 20px 0;
}

.adv-form-thanks h3 {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    color: var(--color-heading);
}

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

@media (max-width: 768px) {
    .adv-section {
        padding-block: 48px;
    }

    .adv-section h2 {
        font-size: var(--font-size-h2);
    }

    .adv-cards,
    .adv-stats {
        margin-top: 28px;
        gap: 16px;
    }

    .adv-card {
        padding: 26px 22px 22px;
    }

    .adv-stat p.adv-stat-num {
        font-size: var(--font-size-display-sm, 2.25rem);
    }

    .adv-bignum p.adv-stat-num {
        font-size: var(--font-size-display, 3rem);
    }

    .adv-logos {
        gap: 24px 32px;
    }

    .adv-logos img,
    .adv-logos .wp-block-image img {
        height: 64px;
    }

    .adv-form-wrap {
        padding: 24px 20px;
    }

    .adv-form .adv-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adv-card,
    .adv-section .wp-block-button__link,
    .adv-form .adv-submit {
        transition: none;
    }

    .adv-card:hover,
    .adv-section .wp-block-button__link:hover {
        transform: none;
    }
}