/* Homepage 2026 redesign (home-2026.aspx).
   Loads after home22.css and restyles its classes; everything is scoped under body.hp26
   so the live homepage is untouched. Ad slots keep their ids, sizes and DOM order -
   only the chrome around them changes, and vertical spacing above each ad is kept at or
   below the current homepage so no ad moves further down the page. */

.hp26 {
    --hp-brand: #1a7c9c;
    --hp-brand-dark: #125d76;
    --hp-brand-soft: #e8f3f7;
    --hp-ink: #14212b;
    --hp-text: #2c3a45;
    --hp-muted: #66737e;
    --hp-line: #e4e9ee;
    --hp-bg: #f3f5f8;
    --hp-surface: #ffffff;
    --hp-premium: #6b2c91;
    --hp-premium-soft: #f5eefa;
    --hp-radius: 12px;
    --hp-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
    font-family: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--hp-text);
    background: var(--hp-bg);
    -webkit-font-smoothing: antialiased;
}

.hp26 a {
    color: var(--hp-brand);
}

.hp26 a:hover {
    color: var(--hp-brand-dark);
    text-decoration: none;
}

.hp26 a:focus-visible,
.hp26 button:focus-visible,
.hp26 input:focus-visible,
.hp26 select:focus-visible {
    outline: 2px solid var(--hp-brand);
    outline-offset: 2px;
}

/* The page wrapper clips with overflow:hidden, which stops position:sticky working.
   overflow:clip clips the same way without that side effect. */
@supports (overflow: clip) {
    .hp26 .content-container {
        overflow: clip;
    }
}

.hp26 .content-container h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-ink);
}

/* ---------- Header ---------- */

.hp26 .background-aqua {
    border: 0;
    background: var(--hp-surface);
    box-shadow: 0 1px 0 var(--hp-line), 0 4px 12px rgba(16, 24, 40, .04);
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Mobile / tablet bar */
.hp26 .breednet-nav {
    padding: 6px 12px;
}

@media (max-width: 1199.98px) {
    /* Solid brand teal: the mobile logo GIF has this colour baked in behind it */
    .hp26 .breednet-nav {
        background: var(--hp-brand);
    }

    .hp26 .breednet-nav-container {
        padding: 0 4px;
    }

    .hp26 .breednet-toggler-icon {
        background: rgba(255, 255, 255, .14);
        border-radius: 10px;
        width: 48px;
    }

    .hp26 .breednet-toggler-icon span {
        background: #fff;
    }

    .hp26 .breednet-toggler[aria-expanded="true"] .breednet-toggler-icon {
        background: rgba(255, 255, 255, .24);
    }

    .hp26 .breednet-menu-container {
        background: var(--hp-brand-dark);
    }

    /* .hp26 a (teal) outranks mobile-menu.css's white links - restore them */
    .hp26 .breednet-menu-link,
    .hp26 .breednet-menu-link:hover,
    .hp26 .breednet-dropdown-item,
    .hp26 .breednet-dropdown-item:hover {
        color: #fff;
        font-weight: 600;
    }

    .hp26 .breednet-dropdown-item {
        font-weight: 500;
    }
}

.hp26 .results-mobile {
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    padding: 6px;
    margin-bottom: 8px;
}

@media (min-width: 992px) {
    .hp26 .logo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 0 8px;
        background: var(--hp-surface);
    }

    /* Current logo GIF at its natural 200x98 (it was squeezed to 54px tall). The wordmark
       sits in padding, so centring it in the 90px leaderboard row just trims 4px of white
       top and bottom - the row stays 90px and nothing below moves. */
    .hp26 .logo-dt {
        display: flex;
        align-items: center;
        height: 90px;
        overflow: hidden;
    }

    .hp26 .logo-dt img {
        display: block;
        flex: 0 0 auto;
        width: 200px;
        height: 98px;
    }
}

/* Tablets (992-1199px, e.g. iPad landscape): the mobile nav bar is in use, so let it span
   the width; the desktop search box is redundant next to its own search icon */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hp26 .background-aqua {
        display: flex;
        align-items: center;
    }

    .hp26 .menu-block {
        display: block;
        flex: 1 1 auto;
    }

    .hp26 .home-search {
        display: none;
    }

    /* The full logo already sits in the header row above - no second one in the bar */
    .hp26 .breednet-logo {
        visibility: hidden;
    }
}

@media (min-width: 1200px) {
    .hp26 .background-aqua {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 0 0 var(--hp-radius) var(--hp-radius);
    }

    .hp26 .menu-block {
        display: block;
        flex: 1 1 auto;
    }

    .hp26 .breednet-nav {
        padding: 0 4px;
        background: transparent;
    }

    .hp26 .breednet-nav-container {
        padding: 0;
    }

    .hp26 .breednet-menu {
        align-items: center;
        gap: 2px;
    }

    .hp26 .breednet-menu-link {
        color: var(--hp-ink);
        font-weight: 600;
        font-size: .9rem;
        padding: 13px 10px;
        border-radius: 0;
        box-shadow: inset 0 -3px 0 transparent;
        transition: color .15s, box-shadow .15s;
    }

    .hp26 .breednet-dropdown-toggle {
        padding-right: 24px;
    }

    .hp26 .breednet-menu-link:hover,
    .hp26 .breednet-dropdown.open > .breednet-menu-link {
        color: var(--hp-brand);
        background: transparent;
        box-shadow: inset 0 -3px 0 var(--hp-brand);
    }

    .hp26 .premium-menu-item .breednet-menu-link {
        background: var(--hp-premium);
        color: #fff;
        border-radius: 999px;
        padding: 6px 14px;
        margin: 0 6px;
        box-shadow: none;
    }

    .hp26 .premium-menu-item .breednet-menu-link:hover {
        background: #58227a;
        color: #fff;
        box-shadow: none;
    }

    .hp26 .breednet-dropdown-menu {
        border: 1px solid var(--hp-line);
        border-radius: 10px;
        padding: 6px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    }

    .hp26 .breednet-dropdown-item {
        color: var(--hp-ink);
        border-radius: 6px;
        font-size: .9rem;
        padding: 8px 14px;
    }

    .hp26 .breednet-dropdown-item:hover {
        background: var(--hp-brand-soft);
        color: var(--hp-brand-dark);
    }

    .hp26 .home-search {
        display: block;
        flex: 0 0 220px;
        padding-right: 12px;
    }

    .hp26 .home-search .search-box {
        width: 100%;
        height: 36px;
        padding: 0 14px 0 36px;
        border: 1px solid var(--hp-line);
        border-radius: 999px;
        background: var(--hp-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366737e' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
        font-size: .9rem;
        color: var(--hp-ink);
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }

    .hp26 .home-search .search-box:focus {
        outline: none;
        background-color: #fff;
        border-color: var(--hp-brand);
        box-shadow: 0 0 0 3px rgba(26, 124, 156, .15);
    }
}

/* Latest results strip (rebuilt into chips by a small script on the page) */
@media (min-width: 992px) {
    .hp26 .ResultsStripContainer {
        background: transparent;
        border: 0;
        padding: 10px 4px 0;
        font-size: .85rem;
    }

    .hp26 #URTxt.hp-results-ready {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

    .hp26 .hp-results-label {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #fff;
        background: var(--hp-brand);
        padding: 4px 9px;
        border-radius: 999px;
    }

    .hp26 .hp-results-day {
        font-weight: 600;
        color: var(--hp-ink);
    }

    .hp26 .hp-results-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .hp26 .hp-results-chips a {
        display: inline-block;
        padding: 3px 11px;
        border-radius: 999px;
        background: var(--hp-surface);
        border: 1px solid var(--hp-line);
        color: var(--hp-ink);
        font-weight: 500;
        transition: border-color .15s, color .15s, background-color .15s;
    }

    .hp26 .hp-results-chips a:hover {
        border-color: var(--hp-brand);
        color: var(--hp-brand);
        background: var(--hp-brand-soft);
    }
}

/* home22.css hides the top strip ad below 1200px; show it on tablets too (a script on the
   page scales the 1200/940px creative down to fit). Phones keep the mobile slot instead. */
@media (min-width: 768px) {
    .hp26 .top1200 {
        display: block;
        padding: 12px 0 0;
    }

    .hp26 .top1200 > div {
        padding: 0 0 12px !important;
    }
}

/* ---------- Section headings ---------- */

.hp26 .hp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hp-line);
}

.hp26 .hp-section-head h2,
.hp26 .segment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.hp26 .hp-section-head h2::before,
.hp26 .segment-header::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--hp-brand);
}

.hp26 .hp-section-head > a {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.hp26 .hp-section-head > a::after {
    content: " \2192";
}

.hp26 .hp-section-head-premium h2::before {
    background: var(--hp-premium);
}

.hp26 .hp-section-head-premium > a {
    color: var(--hp-premium);
}

/* Server-rendered section headers ("STALLION ANNOUNCEMENTS 2026", "FOAL GALLERY" ...) */
.hp26 .segment-header {
    width: auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hp-line);
    padding: 0 0 8px;
    margin: 28px 0 12px;
}

.hp26 a:hover .segment-header {
    color: var(--hp-brand);
}

.hp26 .content-container > .hp-section-head,
.hp26 .hp-racing-head {
    margin-top: 28px;
}

.hp26 .hp-more {
    display: block;
    margin: 14px 0 0;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    border-radius: 10px;
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
    transition: background-color .15s, color .15s;
}

.hp26 .hp-more:hover {
    background: var(--hp-brand);
    color: #fff;
}

/* ---------- Hero: feature photo | top stories | spotlight ---------- */

.hp26 .feature-block {
    background: var(--hp-surface);
}

.hp26 .video-feature-block {
    padding: 12px 16px 16px;
}

.hp26 .feature-image-container {
    border: 0;
    padding: 0;
}

.hp26 .feature-image {
    max-height: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hp-bg);
}

.hp26 .feature-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: 210px;
    object-fit: cover;
}

.hp26 .feature-image-caption {
    display: block;
    max-width: none;
    padding: 10px 2px 0;
    text-align: left;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--hp-muted);
}

.hp26 .feature-image-caption a {
    color: var(--hp-text);
}

.hp26 .feature-image-caption a:hover {
    color: var(--hp-brand);
}

/* Desktop: a full-height photo card. The whole photo shows uncropped (the column is too
   narrow to crop a landscape shot well), over a blurred, darkened copy of itself that fills
   the card; the caption sits on a gradient at its foot. Positioned absolutely, so the card
   takes its height from the hero row instead of adding to it. A script on the page passes
   the photo URL in as --hp-photo. */
@media (min-width: 992px) {
    .hp26 .feature-block .feature-story-block {
        display: flex;
        flex-direction: column;
    }

    .hp26 #FeatureImage {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .hp26 .feature-image-container {
        position: relative;
        flex: 1 1 auto;
        min-height: 280px;
        border-radius: var(--hp-radius);
        overflow: hidden;
        background: #0d1720;
        box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
    }

    .hp26 .feature-image-container::before {
        content: "";
        position: absolute;
        inset: -24px;
        background: var(--hp-photo, none) center / cover no-repeat;
        filter: blur(18px) brightness(.5) saturate(1.15);
    }

    /* Photo centred in the space above the caption */
    .hp26 .feature-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 12px 96px;
        border-radius: 0;
        background: transparent;
    }

    .hp26 .feature-image img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
        transition: transform .4s ease;
    }

    .hp26 .feature-image-container:hover .feature-image img {
        transform: scale(1.03);
    }

    .hp26 .feature-image-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: block;
        padding: 56px 14px 14px;
        background: linear-gradient(180deg, rgba(13, 23, 32, 0) 0%, rgba(13, 23, 32, .72) 45%, rgba(13, 23, 32, .92) 100%);
        color: rgba(255, 255, 255, .78);
        font-size: .84rem;
        line-height: 1.45;
    }

    .hp26 .feature-image-caption a {
        color: #fff;
        font-weight: 600;
    }

    .hp26 .feature-image-caption a:hover {
        color: #fff;
        text-decoration: underline;
    }

    /* Photo credit (the second link) */
    .hp26 .feature-image-caption a + a {
        color: rgba(255, 255, 255, .78);
        font-weight: 500;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .hp26 .feature-image img {
        transition: none;
    }

    .hp26 .feature-image-container:hover .feature-image img {
        transform: none;
    }
}

/* Featured video (RandomVideoTop). The sponsor's colours arrive as inline !important
   background/text colours, so they are kept; a gradient layered on top adds depth. */
.hp26 #RandomVideoTop > div {
    padding: 12px 12px 14px;
    border-radius: var(--hp-radius);
    border: 1px solid var(--hp-line);
    overflow: hidden;
}

.hp26 #RandomVideoTop > .homepage-video {
    border: 0;
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .28) 100%);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
}

.hp26 #RandomVideoTop .video-text-1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 10px;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.hp26 #RandomVideoTop .video-text-1::before {
    content: "\25B6\00a0 Video";
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hp26 #RandomVideoTop > div:not(.homepage-video) .video-text-1::before {
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
}

.hp26 #RandomVideoTop .embed-responsive {
    border-radius: 10px;
    background: #000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.hp26 #RandomVideoTop .row {
    margin: 0;
}

.hp26 #RandomVideoTop .col-12 {
    padding: 10px 2px 0;
    text-align: left;
    font-size: .9rem;
    line-height: 1.45;
    opacity: .92;
}

.hp26 #RandomVideoTop .video-text {
    font-weight: 600;
    text-decoration: none;
}

.hp26 #RandomVideoTop .video-text::after {
    content: " \2192";
}

.hp26 #RandomVideoTop .video-text:hover {
    text-decoration: underline;
}

/* Top stories */
.hp26 .newstop-container-nv {
    display: block;
    min-height: 0;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--hp-line);
    font-size: .88rem;
}

.hp26 .newstop-container-nv:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.hp26 .newstop-headline {
    padding: 0 0 8px;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.hp26 .newstop-headline a,
.hp26 .newstop-container-nv a {
    display: inline;
    color: var(--hp-ink);
}

.hp26 .newstop-container-nv a:hover,
.hp26 .newstop-container-nv a:hover .news-home-preview {
    color: var(--hp-brand);
}

.hp26 .newstop-container-nv .news-home-preview {
    display: block;
    padding: 0;
    color: var(--hp-muted);
    line-height: 1.55;
}

.hp26 .newstop-container-nv .news-home-preview::after {
    content: "";
    display: table;
    clear: both;
}

.hp26 .newstop-container-nv .news-home-preview img {
    float: left;
    width: 132px;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    margin: 3px 14px 4px 0;
    padding: 0;
}

/* "Features" quick links beside the top stories */
.hp26 .feat-narrow b {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-brand);
    padding-bottom: 4px;
}

/* On video days the Features list drops into the news card: full width, two columns,
   rather than a narrow float with empty space beside it */
.hp26 .block2-content .feat-narrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    float: none;
    width: auto;
    margin: 12px 0 0;
    padding: 10px 12px 4px;
    border: 0;
    border-radius: 10px;
    background: var(--hp-bg);
    font-size: .82rem;
}

.hp26 .block2-content .feat-narrow b {
    grid-column: 1 / -1;
}

.hp26 .hp-feat-cell {
    border-top: 1px solid var(--hp-line);
    padding: 8px 0;
    line-height: 1.35;
}

.hp26 .hp-feat-cell a {
    color: var(--hp-ink);
    font-weight: 500;
}

.hp26 .hp-feat-cell a:hover {
    color: var(--hp-brand);
}

/* Spotlight column */
.hp26 #PaidStories:not(:empty)::before {
    content: "Spotlight";
    display: block;
    margin-bottom: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a2660b;
}

.hp26 .articlebox-paid {
    background: linear-gradient(180deg, #fff8ec, #fffdf8);
    border: 1px solid #f1dfbd;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .8rem;
    line-height: 1.45;
    transition: box-shadow .15s, transform .15s;
}

.hp26 .articlebox-paid:hover {
    box-shadow: 0 6px 18px rgba(162, 102, 11, .12);
}

.hp26 .articlebox-paid a {
    color: var(--hp-text);
}

.hp26 .articlebox-paid .news-headline {
    padding: 0 0 6px;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink);
}

.hp26 .articlebox-paid img {
    max-width: 84px;
    border-radius: 6px;
    padding: 0;
    margin: 3px 10px 2px 0;
}

.hp26 .articlebox-paid + .articlebox-paid {
    margin-top: 10px;
}

/* Hypothetical matings card */
.hp26 #HypotheticalMating {
    margin-top: 10px;
    padding: 8px 12px 10px;
    border-radius: 10px;
    background: var(--hp-premium-soft);
    border: 1px solid #e6d6f1;
}

.hp26 #HypotheticalMating .segment-header {
    margin: 0 !important;
    padding: 0;
    border: 0;
    font-size: .95rem;
    color: var(--hp-premium);
}

.hp26 #HypotheticalMating .segment-header::before {
    background: var(--hp-premium);
}

.hp26 .HypForm .mt-2 {
    margin-top: 6px !important;
}

.hp26 .HypForm select {
    max-width: 100%;
    margin: 0;
}

.hp26 .HypForm .select2-container--default .select2-selection--single {
    height: 32px;
    border-color: #d9c8e6;
    border-radius: 8px;
}

.hp26 .HypForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    font-size: .88rem;
}

.hp26 .HypForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

/* Two selects, then the button and the premium note share one row */
.hp26 .HypForm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

.hp26 .HypForm > div.mt-2 {
    grid-column: 1 / -1;
}

.hp26 .HypForm .mt-2 select {
    margin-top: 0 !important;
}

.hp26 .HypForm > div:last-child {
    margin-top: 8px;
    font-size: .92em;
    line-height: 1.25;
}

.hp26 #hypo-submit {
    margin-top: 8px !important;
    padding: 4px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--hp-premium);
    color: #fff;
    font-weight: 600;
}

.hp26 #hypo-submit:hover {
    background: #58227a;
}

.hp26 .HypForm small {
    color: var(--hp-muted);
}

@media (min-width: 992px) {
    .hp26 .feature-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        min-height: 0;
        padding: 10px 0;
        border-radius: var(--hp-radius);
        box-shadow: var(--hp-shadow);
    }

    .hp26 .feature-story-block,
    .hp26 .video-feature-block,
    .hp26 .spotlight-block {
        display: block;
        width: auto;
        min-height: 0;
        border: 0;
        padding: 0 16px;
        font-size: inherit;
    }

    .hp26 .video-feature-block {
        border-left: 1px solid var(--hp-line);
        border-right: 1px solid var(--hp-line);
    }

    .hp26 .feat-narrow {
        width: 34%;
        margin: 0 0 8px 16px;
        padding: 10px 12px 4px;
        border: 0;
        border-radius: 10px;
        background: var(--hp-bg);
        font-size: .8rem;
    }

    .hp26 .newstop-container-nv {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Three-column bands: ad | content | ad ---------- */

.hp26 .block2,
.hp26 .block3,
.hp26 .block4 {
    border-top: 0;
    margin-top: 12px;
    padding-top: 0;
}

.hp26 .block2-content,
.hp26 .block3-content,
.hp26 .block4-content {
    background: var(--hp-surface);
    padding: 16px;
}

@media (max-width: 991.98px) {
    .hp26 .block2 {
        display: block;
    }
}

@media (min-width: 992px) {
    .hp26 .block2,
    .hp26 .block3,
    .hp26 .block4 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
        min-height: 0;
    }

    .hp26 .block2::before, .hp26 .block2::after,
    .hp26 .block3::before, .hp26 .block3::after,
    .hp26 .block4::before, .hp26 .block4::after {
        display: none;
    }

    .hp26 .block2-pos4,
    .hp26 .block3-left,
    .hp26 .block4-left,
    .hp26 .block2-pos1,
    .hp26 .block3-right,
    .hp26 .block4-right,
    .hp26 .block2-content,
    .hp26 .block3-content,
    .hp26 .block4-content {
        float: none;
        width: auto;
        height: auto;
        min-height: 0;
        grid-row: 1;
    }

    .hp26 .block2-pos4,
    .hp26 .block3-left,
    .hp26 .block4-left {
        grid-column: 1;
    }

    .hp26 .block2-content,
    .hp26 .block3-content,
    .hp26 .block4-content {
        grid-column: 2;
        /* 15px each side leaves 570px at 1200 wide - the width of the in-feed news ads */
        padding: 14px 15px 16px;
        border-radius: var(--hp-radius);
        box-shadow: var(--hp-shadow);
    }

    .hp26 .block2-pos1,
    .hp26 .block3-right,
    .hp26 .block4-right {
        grid-column: 3;
        justify-self: end;
    }

    .hp26 .block3-left > div {
        margin-top: 0 !important;
    }

    /* Keeps the lower headlines (and the sponsor ads between them) at their current height */
    .hp26 .block3-content {
        padding-top: 4px;
    }

    .hp26 .newslow-container {
        min-height: 28px;
    }

    .hp26 .block3-content .background-white {
        margin-top: 0;
    }

    /* When the headlines are shorter than the towers beside them, spread the spare height
       over the rows so the list (and "More news") reaches the foot of the card. Only rows
       below the sponsor banner grow, so the banner itself never moves down. */
    .hp26 .block3-content {
        display: flex;
        flex-direction: column;
    }

    .hp26 #NewsLowText:empty,
    .hp26 #NewsLowNoVideoText:empty {
        display: none;
    }

    .hp26 #NewsLowText,
    .hp26 #NewsLowNoVideoText {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }

    .hp26 #NewsLowText > .newslow-container,
    .hp26 #NewsLowNoVideoText > .newslow-container {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .hp26 #NewsLowText > .newslow-container > a,
    .hp26 #NewsLowNoVideoText > .newslow-container > a {
        flex: 1 1 auto;
    }

    .hp26 #NewsLowText:not(:has(.background-white)) > .newslow-container,
    .hp26 #NewsLowNoVideoText:not(:has(.background-white)) > .newslow-container,
    .hp26 #NewsLowText > .background-white ~ .newslow-container,
    .hp26 #NewsLowNoVideoText > .background-white ~ .newslow-container {
        flex-grow: 1;
    }

    .hp26 .block4-left,
    .hp26 .block4-right {
        padding: 0;
    }
}

/* Fixed 300px ad columns with a gutter either side of the content card - from 992px,
   so the 300px towers never overlap the card on tablets. At full width the card is 576px,
   so the in-feed news ads (570px) bleed to its edges rather than sit inside its padding;
   on narrower screens a script on the page scales them down to fit. */
@media (min-width: 992px) {
    .hp26 .block2,
    .hp26 .block3,
    .hp26 .block4 {
        grid-template-columns: 300px minmax(0, 1fr) 300px;
        column-gap: 12px;
    }

    .hp26 .content-container .block2-content .background-white,
    .hp26 .content-container .block3-content .background-white {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* In-feed ads that the code-behind drops between headlines: leave them unstyled
   (no card chrome, no clipping) and just give them breathing room. */
.hp26 .block2-content .background-white,
.hp26 .block3-content .background-white {
    margin: 6px 0;
    text-align: center;
}

.hp26 .background-white:empty {
    margin: 0;
}

/* Mobile copy of the paid story, dropped into the news list by the code-behind */
.hp26 .spotlight-wrapper {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #f1dfbd;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff8ec, #fffdf8);
    font-size: .84rem;
    line-height: 1.5;
}

.hp26 .spotlight-toprow {
    padding-bottom: 6px;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a2660b;
}

.hp26 .spotlight-headline a,
.hp26 .spotlight-wrapper a {
    color: var(--hp-ink);
}

.hp26 .spotlight-wrapper img {
    border-radius: 6px;
}

/* Daily feed banner */
.hp26 .news-message-container {
    margin: 0 0 4px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
    font-size: .85rem;
    text-align: left;
}

.hp26 .news-message-container strong {
    display: inline-block;
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d63c3c;
    color: #fff;
    font-size: .68rem;
    letter-spacing: .08em;
    vertical-align: 1px;
}

.hp26 .news-message-container a {
    color: var(--hp-brand-dark);
    font-weight: 600;
}

/* Mid news: thumbnail cards. The markup nests an <a> around the image + preview, so
   display:contents lifts those into the grid next to the headline. */
.hp26 .newsmid-container {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: 14px;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--hp-line);
    font-size: .88rem;
}

.hp26 .newsmid-container:last-child {
    border-bottom: 0;
}

.hp26 .newsmid-container > a {
    display: contents;
}

.hp26 .newsmid-container .news-home-imgs {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: none;
    max-height: none;
    margin: 0;
}

.hp26 .newsmid-container .news-home-imgs img {
    display: block;
    width: 120px;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
}

.hp26 .newsmid-container .news-headline {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.hp26 .newsmid-container .news-headline a {
    color: var(--hp-ink);
}

.hp26 .newsmid-container .news-home-preview {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding: 0;
    color: var(--hp-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.hp26 .newsmid-container .news-home-preview a,
.hp26 .block2-content .newsmid-container a {
    color: inherit;
}

.hp26 .newsmid-container:hover .news-headline a {
    color: var(--hp-brand);
}

.hp26 .newsmid-container:hover .news-home-imgs img {
    opacity: .9;
}

/* Lower news: compact headline list */
.hp26 .newslow-container {
    min-height: 0;
    padding: 0;
    border-bottom: 1px solid var(--hp-line);
    font-size: .92rem;
}

.hp26 .newslow-container a {
    display: block;
    position: relative;
    padding: 4px 18px 4px 2px;
    color: var(--hp-ink);
    transition: color .15s, background-color .15s;
}

.hp26 .newslow-container a::after {
    content: "\203A";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #b3bcc4;
    font-size: 1.2rem;
    transition: transform .15s, color .15s;
}

.hp26 .newslow-container a:hover {
    color: var(--hp-brand);
}

.hp26 .newslow-container a:hover::after {
    color: var(--hp-brand);
    transform: translate(3px, -50%);
}

.hp26 .news-headline-low {
    font-size: .92em;
    font-weight: 600;
    line-height: 19px;
}

.hp26 .newslow-preview {
    margin-top: 3px;
    color: var(--hp-muted);
    font-size: .88em;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Desktop shows headlines only, as the current homepage does */
@media (min-width: 992px) {
    .hp26 .newslow-preview {
        display: none;
    }
}

/* Newsletter sign-up: a compact band at the foot of the news card */
.hp26 #mc_embed_signup {
    margin: auto 0 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--hp-brand-dark), var(--hp-brand));
    color: #fff;
    font-family: inherit;
    font-size: .85rem;
}

.hp26 #mc_embed_signup form {
    padding: 0;
}

.hp26 #mc_embed_signup_scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto;
    align-items: center;
    column-gap: 10px;
}

.hp26 #mc_embed_signup h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.hp26 #mc_embed_signup p {
    grid-column: 1;
    grid-row: 2;
    margin: 2px 0 0;
    line-height: 1.35;
    color: rgba(255, 255, 255, .85);
}

.hp26 #mc_embed_signup .mc-field-group {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.hp26 #mc_embed_signup #mce-responses {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    padding: 0;
    width: auto;
}

.hp26 #mc_embed_signup_scroll > .clear:last-child {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.hp26 #mc_embed_signup .mc-field-group input {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    text-indent: 0;
}

.hp26 #mc_embed_signup .button {
    width: auto;
    height: 38px;
    margin: 0;
    padding: 0 18px;
    border-radius: 8px;
    background: #fff !important;
    color: var(--hp-brand-dark) !important;
    font-weight: 700;
    font-size: .88rem;
    transition: box-shadow .15s;
}

.hp26 #mc_embed_signup .button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.hp26 #mc_embed_signup div.mce_inline_error {
    border-radius: 6px;
}

/* Under the right-hand tower instead, when the news card is already the tallest column
   (placed by a script on the page so the band never grows) */
.hp26 #mc_embed_signup.hp-nl-side {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
}

.hp26 .hp-nl-side #mc_embed_signup_scroll {
    display: block;
}

.hp26 .hp-nl-side h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.hp26 .hp-nl-side p {
    margin: 0 0 10px;
}

.hp26 #mc_embed_signup.hp-nl-side .button {
    width: 100%;
    margin-top: 8px;
}

/* Not shown on phones before (it sat in the desktop-only ad column) - keep it that way */
@media (max-width: 991.98px) {
    .hp26 #mc_embed_signup {
        display: none;
    }
}

@media (min-width: 992px) {
    /* News card runs the full height of its band, newsletter pinned to its foot */
    .hp26 .block2-content {
        display: flex;
        flex-direction: column;
    }

    .hp26 .block2-content,
    .hp26 .block3-content,
    .hp26 .block4-content {
        align-self: stretch;
    }

    .hp26 #NewsMidNoVideoText:not(:empty),
    .hp26 #NewsMidFeatureText:not(:empty) {
        margin-bottom: 14px;
    }

    /* Side ads ride along while their band scrolls past, instead of leaving a gap */
    .hp26 .block2-pos4,
    .hp26 .block2-pos1,
    .hp26 .block3-left,
    .hp26 .block3-right,
    .hp26 .block4-left,
    .hp26 .block4-right {
        position: sticky;
        top: 64px;
    }
}

/* ---------- Stallion announcements / Featured strips ---------- */

.hp26 #StallionAnnouncementTxt,
.hp26 #RFTxt {
    margin-top: 8px;
}

.hp26 .nf-segment-wrapper {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 2px 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    white-space: normal;
    scrollbar-width: thin;
}

.hp26 .nf-article-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 70%;
    width: auto;
    padding: 0;
    scroll-snap-align: start;
    background: var(--hp-surface);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.hp26 .nf-article-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
}

.hp26 .nf-article-image {
    order: -1;
    height: 150px;
}

.hp26 .nf-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp26 .nf-article-headline {
    height: auto;
    padding: 10px 12px 12px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
}

.hp26 .nf-article-headline a {
    color: var(--hp-ink);
}

.hp26 .nf-article-wrapper:hover .nf-article-headline a {
    color: var(--hp-brand);
}

.hp26 #StallionAnnouncementTxt .segment-header,
.hp26 #FoalDisplay25 .segment-header,
.hp26 #RFTxt .segment-header,
.hp26 .hp-sales > .hp-section-head,
.hp26 .hp-racing-panel-container,
.hp26 .content-container > .hp-section-head {
    margin-left: 16px;
    margin-right: 16px;
}

@media (min-width: 768px) {
    .hp26 .nf-segment-wrapper {
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .hp26 .nf-article-image {
        height: 120px;
    }
}

@media (min-width: 1200px) {
    .hp26 .nf-segment-wrapper {
        padding: 2px 0 12px;
    }

    .hp26 #StallionAnnouncementTxt .segment-header,
    .hp26 #FoalDisplay25 .segment-header,
    .hp26 #RFTxt .segment-header,
    .hp26 .hp-sales > .hp-section-head,
    .hp26 .hp-racing-panel-container,
    .hp26 .content-container > .hp-section-head {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Stallion directory (premium) ---------- */

.hp26 .mating-select-wrapper {
    margin: 4px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--hp-premium-soft);
    text-align: left;
    font-size: .88rem;
}

.hp26 .mating-select-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hp-premium);
}

.hp26 .mating-hp {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #d9c8e6;
    border-radius: 8px;
    color: var(--hp-ink);
    background: #fff;
}

.hp26 .mating-lower {
    color: var(--hp-muted);
    font-size: .82rem;
}

.hp26 .ps-segment-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    text-align: left;
}

.hp26 .ps-segment-wrapper > a:has(.ps-minor),
.hp26 .ps-segment-wrapper > :not(a) {
    grid-column: 1 / -1;
}

.hp26 .ps-article-wrapper {
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 0;
    height: calc(100% - 12px);
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid #e6d6f1;
    border-radius: var(--hp-radius);
    background: #fff;
    overflow: hidden;
    text-align: center;
    transition: transform .15s, box-shadow .15s;
}

.hp26 .ps-segment-wrapper a:hover .ps-article-wrapper {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(107, 44, 145, .15);
}

.hp26 .ps-article-image {
    float: none;
    width: 100%;
    height: 150px;
    margin: 0;
}

.hp26 .ps-article-image img,
.hp26 .ps-article-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp26 .ps-article-headline {
    padding: 10px 10px 2px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--hp-premium);
}

.hp26 .ps-stud {
    padding: 0 10px 12px;
    font-size: .82rem;
    color: var(--hp-muted);
}

.hp26 .ps-minor {
    display: block;
    padding: 8px 4px;
    border-top: 1px solid var(--hp-line);
    font-size: .84rem;
    color: var(--hp-text);
    transition: background-color .15s;
}

.hp26 .ps-segment-wrapper a:hover .ps-minor {
    background: var(--hp-premium-soft);
}

.hp26 .ps-minor b {
    color: var(--hp-premium);
}

.hp26 .ps-recent-wrapper {
    margin-top: 12px;
    padding: 12px 4px 0;
    border-top: 1px solid var(--hp-line);
    font-size: .85rem;
    line-height: 1.55;
}

.hp26 .ps-link {
    margin: 12px 0 0;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: var(--hp-premium);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    transition: background-color .15s;
}

.hp26 a:hover .ps-link,
.hp26 .ps-link:hover {
    background: #58227a;
}

.hp26 a .ps-link,
.hp26 .ps-link a {
    color: #fff;
}

/* ---------- Lower strip ads ---------- */

.hp26 #div-gpt-ad-lowerstrip1200-1,
.hp26 #div-gpt-ad-lowerstrip1200-4,
.hp26 #div-gpt-ad-lowerstrip1200-5 {
    margin-top: 24px !important;
}

/* ---------- Foal gallery ---------- */

.hp26 #FoalDisplay25 > a:hover {
    text-decoration: none;
}

.hp26 .gallery-wrapper-foal {
    padding: 4px 16px 8px;
}

.hp26 .image-gallery-foal {
    gap: 14px;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
}

.hp26 .image-item-foal {
    scroll-snap-align: start;
    background: var(--hp-surface);
    color: var(--hp-muted);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
    padding-bottom: 10px;
    font-size: .8rem;
    line-height: 1.4;
}

.hp26 .image-item-foal img {
    display: block;
    width: 100%;
    height: 150px;
    padding: 0;
    border-radius: 0;
}

.hp26 .image-item-foal > div:first-of-type {
    display: inline-block;
    margin: 10px 0 4px !important;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hp-brand-soft) !important;
    color: var(--hp-brand-dark);
    font-style: normal !important;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hp26 .image-item-foal > div:nth-of-type(2) {
    font-weight: 700;
    font-size: .92rem;
    color: var(--hp-ink);
}

.hp26 .image-item-foal > div:nth-of-type(3) {
    border-top: 0 !important;
    height: 2px;
}

.hp26 .image-item-foal p {
    margin: 4px 10px 0;
}

.hp26 .scroll-btn-foal {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--hp-ink);
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
    transition: background-color .15s, color .15s;
}

.hp26 .scroll-btn-foal:hover {
    background: var(--hp-brand);
    color: #fff;
}

.hp26 .scroll-btn-foal.left {
    left: 4px;
}

.hp26 .scroll-btn-foal.right {
    right: 4px;
}

/* ---------- Sales ---------- */

.hp26 .hp-sales {
    margin-top: 28px;
}

.hp26 .hp-sale-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 16px 14px;
    padding: 14px 16px;
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
}

.hp26 .hp-sale-search-text {
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    color: var(--hp-muted);
}

.hp26 .hp-sale-search-text strong {
    color: var(--hp-ink);
    font-size: .95rem;
}

.hp26 .hp-sale-search .sale-search {
    display: flex;
    flex: 1 1 300px;
    min-width: 0;
    max-width: 480px;
    width: auto;
    margin: 0;
}

.hp26 .hp-sale-search select,
.hp26 .hp-sale-search input[type=text] {
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--hp-line);
    font-size: .9rem;
    max-width: none;
    color: var(--hp-ink);
    background-color: #fff;
}

.hp26 .hp-sale-search select {
    flex: 0 0 auto;
    border-radius: 999px 0 0 999px;
    background: var(--hp-bg);
}

.hp26 .hp-sale-search input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    display: block;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.hp26 .hp-sale-search input[type=text]:disabled {
    background: #fafbfc;
}

.hp26 .sale-list-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0 16px;
}

.hp26 .sale-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--hp-line);
    border-left: 4px solid #b78a2b;
    border-radius: 10px;
    background: var(--hp-surface);
    color: var(--hp-ink);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.hp26 a:hover .sale-cell {
    box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
    border-color: #e1cfa6;
    border-left-color: #b78a2b;
}

.hp26 .grey-grad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 14px 16px 0;
    padding: 0;
    background: none;
}

.hp26 .grey-grad .sales-news-headline {
    width: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
}

.hp26 .grey-grad .sales-news-headline img {
    width: 64px;
    height: 48px !important;
    max-height: none !important;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 10px;
    padding: 0 !important;
}

.hp26 .grey-grad .sales-news-headline a {
    color: var(--hp-ink);
}

.hp26 .grey-grad .sales-news-headline a:hover {
    color: var(--hp-brand);
}

@media (min-width: 768px) {
    .hp26 .sale-list-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hp26 .grey-grad {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .hp26 .hp-sale-search,
    .hp26 .sale-list-wrapper,
    .hp26 .grey-grad {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Sires panels / racing panels ---------- */

.hp26 .hp-sires-panel-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 24px;
    padding: 0 16px;
}

.hp26 .hp-sires-panel-block {
    display: block;
    width: auto;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    font-size: .85rem;
    line-height: 1.5;
}

.hp26 .hp-sires-panel-block .segment-header {
    margin-top: 0;
    font-size: .95rem;
}

.hp26 .hp-sires-panel-block h2,
.hp26 #TTTxt .stakesrace-container > b:first-child {
    display: block;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hp-line);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.hp26 #TTTxt .stakesrace-container > b:first-child + br {
    display: none;
}

.hp26 .hp-sires-topstory {
    min-height: 0;
}

.hp26 .hp-sires-topstory a {
    color: var(--hp-ink);
    font-size: 1rem;
}

.hp26 .news-preview-lower {
    margin: 4px 0 6px;
    color: var(--hp-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.hp26 .news-headline-lower {
    min-height: 0;
    margin-top: 0;
    padding: 8px 0;
    border-top: 1px solid var(--hp-line);
}

.hp26 .news-headline-lower a {
    color: var(--hp-ink);
    font-weight: 600;
}

.hp26 .news-headline-lower i,
.hp26 .hp-sires-topstory i {
    color: var(--hp-muted);
    font-size: .92em;
}

.hp26 .hp-sire-link {
    width: auto;
    margin: 10px 0 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
    font-weight: 600;
    transition: background-color .15s, color .15s;
}

.hp26 a:hover .hp-sire-link {
    background: var(--hp-brand);
    color: #fff;
}

.hp26 .top5-sire-wrapper {
    margin-top: 14px;
    padding-bottom: 4px;
    border-bottom: 0;
}

.hp26 .top5-sire-row-head {
    padding: 6px 8px;
    border-radius: 8px;
    background: #fbf1e1;
    color: #7a5310;
    text-align: left;
}

.hp26 .top5-sire-row-head a {
    color: inherit;
}

.hp26 .top5-sires-row {
    padding: 5px 2px;
    border-bottom: 1px solid var(--hp-line);
    font-variant-numeric: tabular-nums;
}

.hp26 .top5-sires-row:nth-child(odd) {
    background: #fafbfc;
}

/* Racing */
.hp26 .hp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.hp26 .hp-pills a {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    color: var(--hp-ink);
    font-size: .86rem;
    font-weight: 600;
    transition: border-color .15s, color .15s, background-color .15s;
}

.hp26 .hp-pills a:hover {
    border-color: var(--hp-brand);
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
}

.hp26 #RLTxt {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    font-size: .86rem;
}

.hp26 .meeting-link-date {
    margin-top: 6px;
    color: var(--hp-ink);
    background: transparent;
}

.hp26 .meeting-link-salemail,
.hp26 .meeting-link-races {
    border-color: var(--hp-line);
    border-radius: 999px;
    background: var(--hp-brand-soft);
    color: var(--hp-brand-dark);
    font-weight: 600;
}

.hp26 .hp-racing-panel-container {
    width: auto;
}

.hp26 .hp-racing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.hp26 .hp-racing-panel-container .hp-sires-panel-block {
    font-size: .84rem;
}

.hp26 .stakesrace-container {
    padding: 7px 0;
    border-bottom: 1px solid var(--hp-line);
}

.hp26 .stakesrace-container:last-child {
    border-bottom: 0;
}

/* Top Sellers' title lives inside its first row - line it up with the other panel titles */
.hp26 #TTTxt .stakesrace-container:first-child {
    padding-top: 0;
}

.hp26 .stakesrace b:first-child {
    display: inline-block;
    min-width: 30px;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #fbf1e1;
    color: #7a5310;
    font-size: .74rem;
    text-align: center;
}

.hp26 .stakesrace-winner {
    color: var(--hp-muted);
}

.hp26 .hp-lists-block .stakesrace-container a {
    display: block;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp26 .hp-lists-block .stakesrace-container a:hover {
    color: var(--hp-brand);
}

.hp26 .upcoming-stakes-date {
    margin-top: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-size: .78rem;
    letter-spacing: .06em;
}

.hp26 .upcoming-stakes-date:first-of-type {
    margin-top: 0;
}

.hp26 .upcoming-stakes-race {
    padding: 5px 0 5px 8px;
}

@media (min-width: 768px) {
    .hp26 .hp-sires-panel-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hp26 .hp-racing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .hp26 .hp-sires-panel-block {
        border: 0;
    }

    .hp26 .meeting-link {
        padding-left: 8px;
    }

    .hp26 .meeting-link-date {
        display: block;
        margin-top: 8px;
        padding: 0;
    }

    .hp26 .meeting-link-date:first-of-type {
        margin-top: 0;
    }

    .hp26 .meeting-link-salemail {
        margin: 0 4px 0 0;
        padding: 1px 10px;
        border: 0;
        background: var(--hp-brand-soft);
    }

    .hp26 .hp-racing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .hp26 .hp-sires-panel-container {
        padding: 0;
    }
}

/* Mid-page video band */
.hp26 .midvideo-container {
    border-radius: var(--hp-radius);
    overflow: hidden;
}

/* ---------- Footer ---------- */

.hp26 .hp-footer {
    text-align: left;
    margin-top: 40px;
    background: #0d1720;
    color: #aeb8c1;
    font-size: .88rem;
}

.hp26 .hp-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 16px 28px;
}

/* The logo GIF is white on solid black: "lighten" drops the black into the footer colour */
.hp26 .hp-footer-brand img {
    mix-blend-mode: lighten;
}

.hp26 .hp-footer-brand p {
    max-width: 340px;
    margin: 12px 0 14px;
    line-height: 1.55;
}

.hp26 .hp-social {
    display: flex;
    gap: 8px;
}

.hp26 .hp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background-color .15s;
}

.hp26 .hp-social a:hover {
    background: var(--hp-brand);
    color: #fff;
}

.hp26 .hp-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.hp26 .hp-footer-links h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hp26 .hp-footer-links a {
    display: block;
    padding: 4px 0;
    color: #aeb8c1;
}

.hp26 .hp-footer-links a:hover {
    color: #fff;
}

.hp26 .hp-footer-base {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    font-size: .8rem;
    color: #7d8894;
}

@media (min-width: 768px) {
    .hp26 .hp-footer-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    }

    .hp26 .hp-footer-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Mobile tidy-ups ---------- */

/* Mobile in-feed ad (div-gpt-ad-largerec, 320x560) as a scroll-reveal window
   ("interscroller"): while the window is on screen the ad is pinned to the screen at its
   native 320x560, so the page scrolls up over a still ad seen through the window, with
   Advertisement / Scroll to continue bars on the window's edges. The window is 560px plus
   the two 24px bars plus 16px, so for a short stretch of scrolling the whole ad shows
   between the bars. Behind the ad, a heavily blurred copy of the creative's own image fills
   the window (--hp-par-bg; dark fallback when the image cannot be read). A script on the
   page adds .hp-par once the slot has filled (empty or blocked slots collapse as before),
   toggles .hp-par-live while the window is visible, and sets the scale in --hp-par-s. The
   window's clip-path also clips the pinned ad, so it only ever shows through the window. */
@media (max-width: 991.98px) {
    .hp26 .div-gpt-ad-largerec.hp-par {
        position: relative;
        max-width: none !important;
        height: 624px; /* 560px ad + two 24px bars + 16px so the full ad shows for a stretch of scrolling */
        /* !important: the wrapper also has Bootstrap's ml-auto / mr-auto (!important) */
        margin: 12px -16px !important;
        overflow: hidden;
        clip-path: inset(0);
        background: #0d1720;
    }

    /* Blurred copy of the creative behind it */
    .hp26 .div-gpt-ad-largerec.hp-par::before {
        content: "";
        position: absolute;
        inset: -40px;
        background: var(--hp-par-bg, none) center / cover no-repeat;
        filter: blur(28px) brightness(.55) saturate(1.2);
        transform: scale(1.1);
    }

    .hp26 .hp-par #div-gpt-ad-largerec {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 320px;
        margin: 0;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) scale(var(--hp-par-s, 1));
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    }

    /* Pinned: centred in the screen area below the sticky nav bar (--hp-par-off) */
    .hp26 .hp-par.hp-par-live #div-gpt-ad-largerec {
        position: fixed;
        top: calc(50% + var(--hp-par-off, 0px));
    }

    .hp26 .hp-par-bar {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
        height: 24px;
        line-height: 24px;
        background: rgba(13, 23, 32, .88);
        color: rgba(255, 255, 255, .75);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-align: center;
        text-transform: uppercase;
        pointer-events: none;
    }

    .hp26 .hp-par-bar-top {
        top: 0;
    }

    .hp26 .hp-par-bar-end {
        bottom: 0;
    }
}

@media (max-width: 991.98px) {
    /* The feature photo is hidden on phones; drop the empty padding its column kept */
    .hp26 .feature-story-block {
        padding: 0;
    }

    .hp26 .video-feature-block {
        padding: 14px 16px;
        margin-bottom: 0;
    }

    .hp26 .newstop-container-nv .news-home-preview img {
        width: 112px;
        height: 80px;
    }

    .hp26 .block2-content,
    .hp26 .block3-content,
    .hp26 .block4-content {
        padding: 14px 16px;
    }

    .hp26 .block3 {
        margin-top: 12px;
    }

    .hp26 .newsmid-container {
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 12px;
    }

    .hp26 .newsmid-container .news-home-imgs img {
        width: 96px;
        height: 68px;
    }

    .hp26 .newsmid-container .news-headline {
        font-size: .95rem;
    }

    .hp26 .ps-article-image {
        height: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp26 *,
    .hp26 *::before,
    .hp26 *::after {
        transition: none !important;
    }

    .hp26 .nf-article-wrapper:hover,
    .hp26 .ps-segment-wrapper a:hover .ps-article-wrapper {
        transform: none;
    }
}