.matched-betting-support-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    margin: 0 auto;
    max-width: 760px;
    padding: clamp(1.25rem, 3vw, 2rem) 1rem clamp(2rem, 4vw, 3.5rem);
}

/* On desktop the body becomes a two-column layout: the article plus a sticky
   related/next-step rail. The breadcrumb (added after the rail in the markup)
   is pulled back to full width below both columns. */
@media (min-width: 992px) {
    .matched-betting-support-page {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        max-width: 1120px;
    }
}

.matched-betting-support-page > .breadcrumbs {
    grid-column: 1 / -1;
    width: auto;
    /* The grid's row gap already spaces the trail from the columns above, so
       drop the base margin-top to avoid doubling it. */
    margin-top: 0;
    margin-inline: 0;
    padding-inline: 0;
}

.matched-betting-support-content {
    color: #1f2933;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 760px;
}

/* The hero band + page padding already space the first block from the hero; its
   own top margin (e.g. the first h2's 2rem) would just add dead air. */
.matched-betting-support-content > :first-child {
    margin-top: 0;
}

.matched-betting-support-content h1 {
    color: #0f172a;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1.25rem;
}

.matched-betting-support-content h2 {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
}

.matched-betting-support-content h3 {
    color: #0f172a;
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 1.25rem 0 0.5rem;
}

.matched-betting-support-content p,
.matched-betting-support-content ul {
    margin-bottom: 1rem;
}

.matched-betting-support-content ul {
    padding-left: 1.25rem;
}

.matched-betting-support-content hr {
    border: 0;
    border-top: 1px solid #d9e2ec;
    margin: 2rem 0;
}

.matched-betting-support-content a {
    color: #0f172a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.matched-betting-guide-image {
    margin: 1.5rem 0;
}

.matched-betting-guide-image img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.matched-betting-guide-warning {
    align-items: flex-start;
    background: #fff7e6;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    color: #7a4d00;
    display: flex;
    font-size: 0.95rem;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 12px 14px;
}

.matched-betting-guide-callout {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
    padding: 12px 14px;
}

.matched-betting-guide-callout p:last-child {
    margin-bottom: 0;
}

.matched-betting-guide-cross-links {
    font-weight: 600;
    line-height: 1.6;
    margin-top: 2rem;
}

/* Related / next-step rail. Sticky alongside the article on desktop; stacks
   below it on mobile. The "Free tools" group is shared across every support
   page (intentional hand-up to the money tools); the "Related guides" group is
   tailored per page to its nearest cluster siblings to avoid boilerplate. */
.mb-support-rail {
    align-self: start;
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .mb-support-rail {
        position: sticky;
        top: 1.5rem;
    }
}

.mb-support-rail__group {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.25rem;
}

.mb-support-rail__title {
    color: var(--clr-black-75, #5e6266);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.mb-support-rail ul {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mb-support-rail a {
    color: var(--clr-primary-100, #266c82);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.mb-support-rail a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .matched-betting-support-content h1 {
        font-size: 1.6rem;
    }
}

/* Strategy-hub card grid (the /matched-betting/strategies/ index). Each card links
   to a strategy spoke; the grid is driven by the view's STRATEGY_CARDS list. */
.mb-strategy-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 1.5rem 0;
}

@media (min-width: 640px) {
    .mb-strategy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mb-strategy-card {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.25rem;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mb-strategy-card:hover {
    border-color: var(--clr-primary-100, #266c82);
    box-shadow: 0 4px 14px rgba(38, 108, 130, 0.12);
}

.mb-strategy-card__tag {
    color: var(--clr-black-75, #5e6266);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Only the title is a link (a11y: avoids the whole card being one link with an
   underlined text block). The ::after overlay makes the full card clickable, and
   the inherited article underline is dropped — underline shows only on hover. */
.matched-betting-support-content a.mb-strategy-card__title {
    color: var(--clr-primary-100, #266c82);
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.35rem 0 0.5rem;
    text-decoration: none;
}

.mb-strategy-card__title::after {
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
}

.mb-strategy-card:hover .mb-strategy-card__title {
    text-decoration: underline;
}

.mb-strategy-card__blurb {
    color: var(--clr-black-100, #20242a);
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* Responsive 16:9 video embed (partials/youtube-embed.html uses .blog-video).
   These pages moved out of the blog app, which carried this in blog.css — without
   it the iframe collapses to a tiny default size and looks blurred. */
.blog-video {
    margin: 1.5rem 0;
}

.blog-video__frame {
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border: 0;
    border-radius: 8px;
    display: block;
    height: auto;
    width: 100%;
}