/* Homepage styles — matches the existing Classic ASP site layout */
/* CSS custom properties set dynamically by DynamicStyles.razor */

:root {
    --sa-primary-color: #000000;
    --sa-secondary-color: #000000;
    --sa-heading-font: 'Open Sans', Tahoma, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --sa-body-font: 'Roboto', Tahoma, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --sa-nav-font: 'Roboto Condensed', Tahoma, Arial, sans-serif;
    --sa-header-title-font: var(--sa-heading-font);
    --sa-header-title-font-size: 60px;
    --sa-header-font-color: #ffffff;
    --sa-bg-color: #ffffff;
    --sa-bg-image: none;
    --sa-bg-opacity: 1;
    --sa-hover-bg: #F2F2F2;
}

html {
    overflow-y: scroll;
}

/* === Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sa-body-font);
    font-size: 13px;
    color: #000000;
    background-color: var(--sa-bg-color);
    background-image: var(--sa-bg-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sa-heading-font);
    line-height: 1.3;
}

/* Sidebar headings stay on the body font for visual cohesion with the
   compact lists below them. */
.sa-news-sidebar__title,
.sa-activities__title,
.sa-upcoming-games__title {
    font-family: var(--sa-body-font);
    color: #333;
}

h1 {
    font-size: 23px;
    font-weight: 700;
    margin: 0 0 16px;
}

h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
}

a {
    color: var(--sa-link-color, var(--sa-primary-color, #000000));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Keep images inline like the legacy site (Bootstrap 2: border 0,
   vertical-align middle). Admin-supplied HTML relies on this: rows of <img>
   tags must flow side by side (display:block force-breaks them onto separate
   lines) and legacy markup carries border="5"-style presentational attributes
   that author-level border:0 neutralizes. Components that want block images
   set it on their own class (.sa-paragraph__image, .sa-carousel__image, …). */
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

/* Same reasoning for embedded media. Admin-supplied HTML carries provider
   copy-paste snippets with hardcoded pixel sizes - a YouTube embed ships as
   560x315, more than twice the 260px sidebar - and unlike <img> an <iframe>
   has no intrinsic size to shrink to, so it overhangs its column and paints
   over the ad pillar. Legacy capped these in saLogga.css
   (.sektionsRutaInner iframe), the stylesheet that shipped with the only
   layout its HTML boxes rendered in; the rebuild dropped the rule.
   .sa-paragraph__video already sizes its iframe to a ratio wrapper, so this
   is a no-op there. */
iframe,
embed,
object,
video {
    max-width: 100%;
}

/* === Page Container === */
.sa-page {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* === Top Banner === */
.sa-top-banner {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 13px;
    opacity: 0.9;
}

.sa-top-banner__icon {
    margin-right: 8px;
}

.sa-top-banner a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

/* === Header === */
.sa-header {
    position: relative;
    height: var(--sa-header-height, 200px);
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3%;
    gap: 8%;
}

.sa-header__logo {
    height: var(--sa-logo-height, 160px);
    width: auto;
    z-index: 2;
}

/* Logo links to the start page (header + elite variants). display:contents keeps
   the <a> out of layout so the logo sizing/positioning is unchanged. */
.sa-logo-link {
    display: contents;
}

/* display:contents removes the <a>'s own box, so a focus ring on the link itself
   has nothing to paint — put the keyboard focus indicator on the child logo image
   so the link stays visibly focusable. */
.sa-logo-link:focus-visible img {
    outline: 2px solid var(--sa-primary-color, #0066cc);
    outline-offset: 2px;
}

.sa-header__title {
    flex: 1;
    z-index: 2;
}

.sa-header__title h1 {
    font-family: var(--sa-header-title-font);
    font-size: var(--sa-header-title-font-size);
    color: var(--sa-header-font-color);
    margin: 0;
    text-shadow: 0 0 5px #000000;
    line-height: 1;
    font-weight: 400;
}

.sa-header__subtitle {
    z-index: 2;
    color: var(--sa-sub-header-font-color, var(--sa-header-font-color));
    font-family: var(--sa-sub-header-title-font, var(--sa-header-title-font));
    text-shadow: 0 0 5px #000000;
    font-weight: 400;
    line-height: 1;
}

.sa-header__subtitle--line2 {
    font-size: var(--sa-sub-header-title-font-size, 28px);
}

.sa-header__subtitle--line3 {
    font-size: var(--sa-third-header-title-font-size, 32px);
    font-family: var(--sa-third-header-title-font, var(--sa-sub-header-title-font, var(--sa-header-title-font)));
    color: var(--sa-third-header-font-color, var(--sa-sub-header-font-color, var(--sa-header-font-color)));
}

/* Linear gradient overlay (legacy .linearBg) */
.sa-header--gradient {
    background: linear-gradient(to top, #000000, #445566);
}

/* === Section Tabs (main nav) === */
.sa-section-tabs {
    position: relative;
    background-color: var(--sa-primary-color, #003380);
    padding: 0;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 5px;
    box-shadow: 0 0 10px #333;
}

/* Desktop: list is a flex row */
.sa-section-tabs__list {
    display: flex;
    flex-wrap: wrap;
}

.sa-section-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* 12px horizontal keeps parity with the old site's menu width — clubs with
       many sections otherwise wrap onto a second line. */
    padding: 9px 12px;
    background-color: transparent;
    border: none;
    color: var(--sa-on-primary, #ffffff);
    font-family: var(--sa-nav-font);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sa-section-tabs__tab:hover {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-decoration: none;
}

.sa-section-tabs__tab--active {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    font-weight: 700;
}

/* Dropdown menu for section tabs */
.sa-section-tabs__dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.sa-section-tabs__dropdown-icon {
    font-size: 10px;
    margin-left: 4px;
}

.sa-section-tabs__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.sa-section-tabs__dropdown--open .sa-section-tabs__dropdown-menu {
    display: block;
}

.sa-section-tabs__dropdown-item {
    display: block;
    padding: 8px 15px;
    color: #333;
    font-family: var(--sa-nav-font);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}

.sa-section-tabs__dropdown-item--active {
    font-weight: 700;
}

/* Login dropdown (right-aligned) */
.sa-section-tabs__login {
    position: relative;
    margin-left: auto;
}

.sa-section-tabs__login-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 270px;
    white-space: normal;
    flex-direction: column;
    padding: 12px;
    background-color: #ffffff;
    color: #333;
    font-family: var(--sa-body-font);
    font-size: 14px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.sa-section-tabs__login-dropdown p {
    margin: 0 0 6px;
}

.sa-section-tabs__login-dropdown p + p {
    margin-bottom: 12px;
}

.sa-section-tabs__login-dropdown p:last-child {
    margin-bottom: 0;
}

.sa-section-tabs__login:hover .sa-section-tabs__login-dropdown {
    display: flex;
}

.sa-section-tabs__dropdown-item:hover {
    background-color: var(--sa-hover-bg);
    color: #000000;
    text-decoration: none;
}
.sa-section-tabs .fa-house {
    margin-right: 6px;
    font-size:11px;
}

/* === Sub-menu bar (below section tabs) === */
.sa-submenu-bar {
    background-color: var(--sa-primary-color);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--sa-secondary-color);
}

.sa-submenu-bar__item {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--sa-on-primary, #ffffff);
    font-family: var(--sa-nav-font);
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}

.sa-submenu-bar__item:hover {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-decoration: none;
}

.sa-submenu-bar--sub .sa-submenu-bar__item {
    color: var(--sa-on-secondary, #ffffff);
}

.sa-submenu-bar__item--active {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    font-weight: 700;
}

.sa-submenu-bar__caret {
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.7;
    line-height: 1;
}

.sa-submenu-bar--sub {
    background-color: var(--sa-secondary-color);
    border-bottom: 0;
    font-size: 13px;
}

.sa-submenu-bar--sub .sa-submenu-bar__item {
    text-transform: uppercase;
    font-size: 13px;
    padding: 6px 12px;
}

.sa-submenu-bar--sub .sa-submenu-bar__item--active {
    background-color: rgba(0, 0, 0, 0.18);
}

/* === Layout wrapper (submenu + content) === */
.sa-layout-wrapper {
    max-width: 1200px;
    margin: 0 auto 5px;
    box-shadow: 0 0 10px #333;
}

/* === Main Layout === */
.sa-layout {
    min-height: 1000px;
    background: #ffffff;
}

.sa-layout__content {
    padding: 25px 20px;
}

/* === Start Page Columns (main content + news sidebar) === */
.sa-start-columns {
    display: flex;
    gap: 14px;
}

.sa-start-columns__main {
    flex: 1;
    min-width: 0;
    padding-bottom: 20px;
    border-right: 1px dotted #ddd;
    padding-right: 14px;
}

/* Thin static page: cap main content at the same width as the news page (650px),
   matching legacy's tbl1 narrow article layout. */
.sa-start-columns__main--thin {
    max-width: 650px;
}

.sa-start-columns__sidebar {
    flex-shrink: 0;
    width: 260px;
    border-right: 1px dotted #ddd;
    padding-right: 14px;
}

/* === Section Layout (left sub-menu + content) === */
.sa-section {
    display: flex;
    gap: 20px;
}

.sa-section__menu {
    width: 180px;
    flex-shrink: 0;
}

.sa-section__content {
    flex: 1;
    min-width: 0;
}

/* === Left Sub Menu === */
.sa-sub-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sa-sub-menu__item {
    display: block;
    padding: 8px 12px;
    color: #000000;
    font-size: 14px;
    font-family: var(--sa-nav-font);
    transition: background-color 0.15s ease;
}

.sa-sub-menu__item:hover {
    background-color: var(--sa-hover-bg);
    text-decoration: none;
}

.sa-sub-menu__item--active {
    background-color: var(--sa-hover-bg);
    font-weight: 700;
}

.sa-sub-menu__subitem {
    padding-left: 24px;
    font-size: 13px;
}

/* === Ad Sidebar === */
.sa-ad-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: auto;
}

.sa-ad-sidebar__item {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: opacity 0.15s ease;
}

.sa-ad-sidebar__item:hover {
    opacity: 0.85;
}

.sa-ad-sidebar__item--framed {
    border: 1px solid #ddd;
    padding: 8px;
    background: #ffffff;
}

/* First-party link to the club's Facebook page, under the page plugin. The
   plugin's own click-through dies in Safari with "Prevent cross-site tracking"
   on (the default) because ITP blocks the third-party iframe's navigation, so
   the tile needs a link owned by this document to stay usable. */
.sa-ad-sidebar__facebook-link {
    display: block;
    padding-top: 8px;
    font-family: var(--sa-body-font);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--sa-primary-color, #333);
    text-decoration: none;
}

.sa-ad-sidebar__facebook-link:hover,
.sa-ad-sidebar__facebook-link:focus-visible {
    text-decoration: underline;
}

.sa-ad-sidebar__item img {
    width: auto;
    max-width: 100%;
    max-height: 150px;
    display: block;
    margin: 0 auto;
}

/* Grouped ads rotate as a slideshow. Pages are stacked in the same grid cell
   so the group keeps the height of its tallest page; the active page
   cross-fades in over the outgoing one (legacy: 1s jQuery fade every 3s). */
.sa-ad-sidebar__group {
    display: grid;
    /* A page shorter than the group's tallest one centres vertically in the
       slot instead of hugging its top (gh#201). */
    align-items: center;
}

.sa-ad-sidebar__group-page {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s linear 1s;
}

.sa-ad-sidebar__group-page--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
}

/* Separator rows: admin-entered headlines in the ad flow (e.g. "Gold
   sponsors"). Styled like the other sidebar box titles. */
.sa-ad-sidebar__separator {
    font-family: var(--sa-body-font);
    font-size: 13px;
    font-weight: 700;
    color: #333;
    padding-bottom: 8px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-ad-sidebar__separator-spacer {
    height: 16px;
}

/* Mobile-only ad rotator (legacy annonsPelareMobil): one mobile-flagged ad at
   a time in a fixed strip above the content. Hidden on desktop, where the full
   ad pillar renders instead; the mobile rules live in the 980px block. */
.sa-ad-rotator {
    display: none;
}

/* === Carousel / News Slider === */
.sa-carousel-wrapper {
    margin: -25px -20px 25px;
    border-bottom: 3px solid var(--sa-secondary-color);
}

/* === News Carousel (hero) === */
.sa-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #1a1a1a;
}

.sa-carousel__track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 450px;
    overflow: hidden;
}

.sa-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sa-carousel__slide:hover .sa-carousel__image {
    transform: scale(1.03);
}

.sa-carousel__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--sa-primary-color, #333) 0%, var(--sa-secondary-color, #666) 100%);
}

.sa-carousel__overlay {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    min-width: 300px;
}

.sa-carousel__title {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 4px;
}

.sa-carousel__date {
    font-size: 12px;
    opacity: 0.9;
}

/* Nav arrows */
.sa-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: 300;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    backdrop-filter: blur(4px);
}

.sa-carousel__nav:hover {
    background: rgba(0, 0, 0, 0.6);
}

.sa-carousel__nav--prev {
    left: 12px;
}

.sa-carousel__nav--next {
    right: 12px;
}

/* Indicators */
.sa-carousel__indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.sa-carousel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, transform 0.2s;
}

.sa-carousel__indicator:hover {
    background: rgba(255, 255, 255, 0.7);
}

.sa-carousel__indicator--active {
    background: #fff;
    transform: scale(1.25);
}

/* === Paragraph/Content Block === */
.sa-paragraph {
    margin-bottom: 0;
}

.sa-paragraph__divider {
    border: 0;
    border-top: 1px solid #CCCCCC;
    margin-top: 18px;
    margin-bottom: 18px;
    clear: both;
}

.sa-paragraph__title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 5px;
}

.sa-paragraph__date {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}

.sa-paragraph__preamble {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.sa-paragraph__body {
    font-size: 13px;
    line-height: 1.5;
}

/* Bullet/numbered lists authored in admin rich-text content. The global reset
   (*, *::before, *::after { padding: 0 }) strips the browser's default ~40px
   list padding, so restore indentation here; scope to the rich-text containers
   so the site's flush nav/menu/sidebar lists (list-style: none) stay
   unaffected. Per-level padding gives nested lists progressive indentation,
   and the bottom margins separate the list block and its items from
   surrounding content. */
.sa-paragraph__body ul,
.sa-paragraph__body ol,
.sa-paragraph__preamble ul,
.sa-paragraph__preamble ol,
.sa-news-feed__text ul,
.sa-news-feed__text ol,
.sa-news-feed__preamble ul,
.sa-news-feed__preamble ol,
.sa-html-area__body ul,
.sa-html-area__body ol {
    padding-left: 40px;
    margin: 0 0 10px;
}

.sa-paragraph__body ul,
.sa-paragraph__preamble ul,
.sa-news-feed__text ul,
.sa-news-feed__preamble ul,
.sa-html-area__body ul {
    list-style: disc outside;
}

.sa-paragraph__body ol,
.sa-paragraph__preamble ol,
.sa-news-feed__text ol,
.sa-news-feed__preamble ol,
.sa-html-area__body ol {
    list-style: decimal outside;
}

.sa-paragraph__body li,
.sa-paragraph__preamble li,
.sa-news-feed__text li,
.sa-news-feed__preamble li,
.sa-html-area__body li {
    margin-bottom: 10px;
}

/* Paragraphs authored in admin rich-text content. The global reset
   (*, *::before, *::after { margin: 0 }) strips the browser's default <p>
   margins, so a single Enter (a new <p>) rendered with no visible gap and
   clubs compensated with double line breaks (GH issue 161). Restore a 14px
   gap matching the member app (Sa.App.MemberClient Messages.scss), scoped to
   the rich-text containers. The :last-child override keeps the containers'
   own bottom spacing intact (no double gap before e.g. "Läs mer" links). */
.sa-paragraph__body p,
.sa-paragraph__preamble p,
.sa-news-feed__text p,
.sa-news-feed__preamble p,
.sa-html-area__body p {
    margin: 0 0 14px;
}

.sa-paragraph__body p:last-child,
.sa-paragraph__preamble p:last-child,
.sa-news-feed__text p:last-child,
.sa-news-feed__preamble p:last-child,
.sa-html-area__body p:last-child {
    margin-bottom: 0;
}

/* Hide borders on tables embedded in admin-authored paragraph HTML.
   Legacy hemsida rendered these borderless in practice (the legacy editor
   didn't emit border attributes); modern editors / sanitized legacy content
   leave <table border="1"> in place, which the browser honors as visible
   1px borders. Scoping to .sa-paragraph so structural tables elsewhere
   in the site are unaffected. */
.sa-paragraph__body table,
.sa-paragraph__body th,
.sa-paragraph__body td,
.sa-paragraph__preamble table,
.sa-paragraph__preamble th,
.sa-paragraph__preamble td {
    border: 0;
}

/* === Legacy Bootstrap 2 grid (.row, .row-fluid, .span1-12, .offset1-12) ===

   Restored for admin-authored paragraph HTML only. The legacy hemsida
   shipped Bootstrap 2.3.2's grid in its global stylesheet, and customers
   pasted layouts like <div class="row-fluid"><div class="span6">...</div>
   <div class="span6">...</div></div> directly into the rich-text editor.
   Without these classes the columns collapse to inline divs in the new
   homepage and the side-by-side layout falls apart.

   We standardize on the percentage-based math from Bootstrap 2's .row-fluid
   (legacy bootstrap.css line ~406) regardless of whether the customer used
   .row or .row-fluid. The percentage variant scales to whatever container
   width the new homepage gives the paragraph body, so we don't have to
   carry the 940px outer container the legacy site assumed.

   12-column grid, 2.127659574468085% gutter between siblings. Scoped to
   .sa-paragraph__body and .sa-paragraph__preamble so the classes can't
   collide with anything in our own component CSS. */
.sa-paragraph__body .row,
.sa-paragraph__body .row-fluid,
.sa-paragraph__preamble .row,
.sa-paragraph__preamble .row-fluid {
    width: 100%;
}
.sa-paragraph__body .row::after,
.sa-paragraph__body .row-fluid::after,
.sa-paragraph__preamble .row::after,
.sa-paragraph__preamble .row-fluid::after {
    content: "";
    display: table;
    clear: both;
}
/* Enumerate explicit class names rather than [class*="span"] so we don't
   accidentally match author-written classes that happen to contain "span". */
.sa-paragraph__body .span1,
.sa-paragraph__body .span2,
.sa-paragraph__body .span3,
.sa-paragraph__body .span4,
.sa-paragraph__body .span5,
.sa-paragraph__body .span6,
.sa-paragraph__body .span7,
.sa-paragraph__body .span8,
.sa-paragraph__body .span9,
.sa-paragraph__body .span10,
.sa-paragraph__body .span11,
.sa-paragraph__body .span12,
.sa-paragraph__preamble .span1,
.sa-paragraph__preamble .span2,
.sa-paragraph__preamble .span3,
.sa-paragraph__preamble .span4,
.sa-paragraph__preamble .span5,
.sa-paragraph__preamble .span6,
.sa-paragraph__preamble .span7,
.sa-paragraph__preamble .span8,
.sa-paragraph__preamble .span9,
.sa-paragraph__preamble .span10,
.sa-paragraph__preamble .span11,
.sa-paragraph__preamble .span12 {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
    margin-left: 2.127659574468085%;
}
.sa-paragraph__body .row > .span1:first-child,
.sa-paragraph__body .row > .span2:first-child,
.sa-paragraph__body .row > .span3:first-child,
.sa-paragraph__body .row > .span4:first-child,
.sa-paragraph__body .row > .span5:first-child,
.sa-paragraph__body .row > .span6:first-child,
.sa-paragraph__body .row > .span7:first-child,
.sa-paragraph__body .row > .span8:first-child,
.sa-paragraph__body .row > .span9:first-child,
.sa-paragraph__body .row > .span10:first-child,
.sa-paragraph__body .row > .span11:first-child,
.sa-paragraph__body .row > .span12:first-child,
.sa-paragraph__body .row-fluid > .span1:first-child,
.sa-paragraph__body .row-fluid > .span2:first-child,
.sa-paragraph__body .row-fluid > .span3:first-child,
.sa-paragraph__body .row-fluid > .span4:first-child,
.sa-paragraph__body .row-fluid > .span5:first-child,
.sa-paragraph__body .row-fluid > .span6:first-child,
.sa-paragraph__body .row-fluid > .span7:first-child,
.sa-paragraph__body .row-fluid > .span8:first-child,
.sa-paragraph__body .row-fluid > .span9:first-child,
.sa-paragraph__body .row-fluid > .span10:first-child,
.sa-paragraph__body .row-fluid > .span11:first-child,
.sa-paragraph__body .row-fluid > .span12:first-child,
.sa-paragraph__preamble .row > .span1:first-child,
.sa-paragraph__preamble .row > .span2:first-child,
.sa-paragraph__preamble .row > .span3:first-child,
.sa-paragraph__preamble .row > .span4:first-child,
.sa-paragraph__preamble .row > .span5:first-child,
.sa-paragraph__preamble .row > .span6:first-child,
.sa-paragraph__preamble .row > .span7:first-child,
.sa-paragraph__preamble .row > .span8:first-child,
.sa-paragraph__preamble .row > .span9:first-child,
.sa-paragraph__preamble .row > .span10:first-child,
.sa-paragraph__preamble .row > .span11:first-child,
.sa-paragraph__preamble .row > .span12:first-child,
.sa-paragraph__preamble .row-fluid > .span1:first-child,
.sa-paragraph__preamble .row-fluid > .span2:first-child,
.sa-paragraph__preamble .row-fluid > .span3:first-child,
.sa-paragraph__preamble .row-fluid > .span4:first-child,
.sa-paragraph__preamble .row-fluid > .span5:first-child,
.sa-paragraph__preamble .row-fluid > .span6:first-child,
.sa-paragraph__preamble .row-fluid > .span7:first-child,
.sa-paragraph__preamble .row-fluid > .span8:first-child,
.sa-paragraph__preamble .row-fluid > .span9:first-child,
.sa-paragraph__preamble .row-fluid > .span10:first-child,
.sa-paragraph__preamble .row-fluid > .span11:first-child,
.sa-paragraph__preamble .row-fluid > .span12:first-child {
    margin-left: 0;
}
.sa-paragraph__body .span12, .sa-paragraph__preamble .span12 { width: 100%; }
.sa-paragraph__body .span11, .sa-paragraph__preamble .span11 { width: 91.48936170212765%; }
.sa-paragraph__body .span10, .sa-paragraph__preamble .span10 { width: 82.97872340425532%; }
.sa-paragraph__body .span9,  .sa-paragraph__preamble .span9  { width: 74.46808510638297%; }
.sa-paragraph__body .span8,  .sa-paragraph__preamble .span8  { width: 65.95744680851064%; }
.sa-paragraph__body .span7,  .sa-paragraph__preamble .span7  { width: 57.44680851063829%; }
.sa-paragraph__body .span6,  .sa-paragraph__preamble .span6  { width: 48.93617021276595%; }
.sa-paragraph__body .span5,  .sa-paragraph__preamble .span5  { width: 40.42553191489362%; }
.sa-paragraph__body .span4,  .sa-paragraph__preamble .span4  { width: 31.914893617021278%; }
.sa-paragraph__body .span3,  .sa-paragraph__preamble .span3  { width: 23.404255319148934%; }
.sa-paragraph__body .span2,  .sa-paragraph__preamble .span2  { width: 14.893617021276595%; }
.sa-paragraph__body .span1,  .sa-paragraph__preamble .span1  { width: 6.382978723404255%; }

.sa-paragraph__body .offset12, .sa-paragraph__preamble .offset12 { margin-left: 104.25531914893617%; }
.sa-paragraph__body .offset11, .sa-paragraph__preamble .offset11 { margin-left: 95.74468085106382%; }
.sa-paragraph__body .offset10, .sa-paragraph__preamble .offset10 { margin-left: 87.23404255319149%; }
.sa-paragraph__body .offset9,  .sa-paragraph__preamble .offset9  { margin-left: 78.72340425531914%; }
.sa-paragraph__body .offset8,  .sa-paragraph__preamble .offset8  { margin-left: 70.2127659574468%; }
.sa-paragraph__body .offset7,  .sa-paragraph__preamble .offset7  { margin-left: 61.70212765957446%; }
.sa-paragraph__body .offset6,  .sa-paragraph__preamble .offset6  { margin-left: 53.191489361702125%; }
.sa-paragraph__body .offset5,  .sa-paragraph__preamble .offset5  { margin-left: 44.680851063829785%; }
.sa-paragraph__body .offset4,  .sa-paragraph__preamble .offset4  { margin-left: 36.170212765957444%; }
.sa-paragraph__body .offset3,  .sa-paragraph__preamble .offset3  { margin-left: 27.659574468085104%; }
.sa-paragraph__body .offset2,  .sa-paragraph__preamble .offset2  { margin-left: 19.148936170212764%; }
.sa-paragraph__body .offset1,  .sa-paragraph__preamble .offset1  { margin-left: 10.638297872340425%; }

/* Mobile: legacy Bootstrap 2 responsive collapsed spans below 768px to
   full-width stacked blocks. Keep that behavior — narrow paragraph
   containers can't hold a 12-column grid sensibly. */
@media (max-width: 767px) {
    .sa-paragraph__body .row > [class*="span"],
    .sa-paragraph__body .row-fluid > [class*="span"],
    .sa-paragraph__preamble .row > [class*="span"],
    .sa-paragraph__preamble .row-fluid > [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

.sa-paragraph__figure {
    margin: 0;
}

.sa-paragraph__image {
    display: block;
    max-width: 100%;
    height: auto;
}

.sa-paragraph__caption {
    font-style: italic;
    font-size: 13px;
    margin-top: 5px;
    text-align: left;
}

.sa-paragraph--image-right,
.sa-paragraph--image-left {
    overflow: hidden;
}

.sa-paragraph--image-right .sa-paragraph__figure-wrap {
    float: right;
    max-width: 40%;
    margin: 0 0 10px 15px;
}

.sa-paragraph--image-left .sa-paragraph__figure-wrap {
    float: left;
    max-width: 40%;
    margin: 0 15px 10px 0;
}

.sa-paragraph--image-center .sa-paragraph__figure-wrap {
    text-align: center;
    margin: 10px 0;
}

.sa-paragraph--image-center .sa-paragraph__figure {
    display: inline-block;
    max-width: 100%;
}

.sa-paragraph__image-collage {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0;
}

.sa-paragraph__image-collage img {
    width: calc(33.333% - 4px);
    aspect-ratio: 1;
    object-fit: cover;
}

.sa-paragraph__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    margin: 5px 0 10px;
}

.sa-paragraph__gallery-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.sa-paragraph__gallery--lazy {
    display: none;
}

.sa-paragraph__gallery-link--extra {
    display: none;
}

.sa-paragraph__gallery-link--extra.sa-paragraph__gallery-link--revealed {
    display: block;
}

.sa-paragraph__gallery-toggle-wrap {
    margin-top: 10px;
}

.sa-paragraph__gallery-load {
    margin: 5px 0 10px;
    font-size: 14px;
}

.sa-paragraph__video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 10px 0;
}

.sa-paragraph__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.sa-paragraph__buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 24px;
}

/* When the next paragraph also renders buttons, drop the trailing margin so
   consecutive button blocks don't accumulate spacing. The second selector
   keeps the margin collapsed when an admin-toggled HasLine divider sits
   between the two button paragraphs (the divider itself is hidden below). */
.sa-paragraph:has(.sa-paragraph__buttons):has(+ .sa-paragraph .sa-paragraph__buttons) .sa-paragraph__buttons,
.sa-paragraph:has(.sa-paragraph__buttons):has(+ .sa-paragraph__divider + .sa-paragraph .sa-paragraph__buttons) .sa-paragraph__buttons {
    margin-bottom: 0;
}

/* Hide the admin-toggled divider when it falls between two button-only
   paragraph blocks. Visually the buttons should stack as one group; the
   horizontal rule between them is noise that admins enable inconsistently
   across paragraphs. */
.sa-paragraph:has(.sa-paragraph__buttons) + .sa-paragraph__divider:has(+ .sa-paragraph .sa-paragraph__buttons) {
    display: none;
}

/* Start-page buttons sit at the top of the welcome section, so tighten the
   top margin to keep them close to the carousel above. */
.sa-welcome .sa-paragraph__buttons {
    margin-top: 6px;
}

/* The first button paragraph in the welcome section flush-mounts against the
   carousel — no top margin. */
.sa-welcome .sa-paragraph:first-child .sa-paragraph__buttons {
    margin-top: 0;
}

.sa-paragraph__button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 80px;
    padding: 14px 20px;
    color: #ffffff;
    background-color: #000000;
    border-radius: 8px;
    /* Soft halo so a white background still reads as a button against the
       page. Cheap to render and disappears against dark colors. */
    box-shadow: 0 0 5px #ddd;
    /* filter-based hover keeps the admin-chosen background intact. */
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.sa-paragraph__button:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.sa-paragraph__button-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.sa-paragraph__button-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-paragraph__button-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.sa-paragraph__button-subtitle {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.25;
}

.sa-paragraph__button-arrow {
    font-size: 16px;
    flex: 0 0 auto;
}

/* === Lightbox === */
.sa-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.sa-lightbox--open {
    display: flex;
}

.sa-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.sa-lightbox__image {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    z-index: 1;
}

.sa-lightbox__close {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 2;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
}

.sa-lightbox__close:hover {
    opacity: 0.7;
}

.sa-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #fff;
    font-size: 40px;
    padding: 10px 16px;
    cursor: pointer;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.sa-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.sa-lightbox__nav--prev {
    left: 10px;
}

.sa-lightbox__nav--next {
    right: 10px;
}

.sa-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-family: var(--sa-body-font);
}

/* === News === */
.sa-news-detail {
    position: relative;
    min-height: 300px;
    max-width: 650px;
}



.sa-news-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
}

.sa-news-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sa-link-color, var(--sa-primary-color));
    font-size: 16px;
}

.sa-news-nav__link:hover {
    background: var(--sa-hover-bg);
}

.sa-news-nav__link--disabled {
    color: #cccccc;
    pointer-events: none;
}

.sa-news-nav__link--rss {
    margin-left: 8px;
    color: #ee802f;
}

/* The nav is absolutely positioned over the article's top-right corner, so the
   title must reserve space for it or long headlines flow under the arrows.
   120px = prev + next (32px each, 4px gap) + RSS (8px margin + 32px) + breathing room. */
.sa-news-detail .sa-paragraph__title {
    padding-right: 120px;
}

.sa-news-share {
    margin-top: 20px;
}

.sa-news-share__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    border-radius: 9999px;
}

.sa-news-share__link:hover {
    background: #333333;
    color: #ffffff;
}

.sa-news-archive__title {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 10px;
}

.sa-news-archive {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e5e5;
}

.sa-news-archive__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sa-news-archive__link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-news-archive__date {
    flex-shrink: 0;
    font-size: 12px;
    color: #888;
}

/* === News Feed (Start page) === */
.sa-news-feed {
    display: flex;
    flex-direction: column;
}

.sa-news-feed__item {
    margin-bottom: 0;
}

.sa-news-feed__title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 0;
}

.sa-news-feed__section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f2f2f2;
    padding: 1px 6px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.sa-news-feed__title a {
    color: #000;
    text-decoration: none;
}

.sa-news-feed__title a:hover {
    text-decoration: underline;
}

.sa-news-feed__date {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.sa-news-feed__image {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.sa-news-feed__image img {
    max-width: 100%;
    height: auto;
}

.sa-news-feed__image--right {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
    text-align: right;
}

.sa-news-feed__image--right img {
    width: 180px;
    height: auto;
}

.sa-news-feed__image--left {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: left;
}

.sa-news-feed__image--left img {
    width: 180px;
    height: auto;
}

.sa-news-feed__image-text {
    margin-top: 5px;
    font-size: 11px;
    font-style: italic;
    color: #666;
    text-align: left;
}

.sa-news-feed__preamble {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
}

.sa-news-feed__readmore {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
}

.sa-news-feed__text {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
}

.sa-news-feed__more {
    clear: both;
}

.sa-news-feed__separator {
    border: 0;
    border-top: 1px solid #CCCCCC;
    margin-top: 18px;
    margin-bottom: 18px;
    clear: both;
}

.sa-news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}

/* Admin-supplied HTML boxes (up to 2) shown above the rest of the sidebar. */
.sa-html-area {
    margin-bottom: 24px;
}

.sa-html-area__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    text-transform: uppercase;
    color: #333;
}

.sa-html-area__body {
    font-size: 14px;
    line-height: 1.4;
}

.sa-html-area__body img {
    max-width: 100%;
    height: auto;
}

/* A capped embed keeps its height attribute - 560x315 becomes 260x315 - so the
   player letterboxes itself in black bars. The sidebar is the only column
   narrower than a stock embed, so give the video hosts clubs actually paste a
   real 16:9 box here. Ads keep their own sizing: network creatives in the ad
   pillar are built to a fixed size. */
.sa-html-area__body iframe[src*="youtube.com"],
.sa-html-area__body iframe[src*="youtube-nocookie.com"],
.sa-html-area__body iframe[src*="youtu.be"],
.sa-html-area__body iframe[src*="player.vimeo.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.sa-news-sidebar__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    text-transform: uppercase;
    color: #333;
}

.sa-news-sidebar__item-image {
    float: right;
    height: 50px;
    width: 89px;
    object-fit: cover;
    object-position: center;
}

.sa-news-sidebar__item {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background-color 0.15s;
    overflow: hidden;
}

.sa-news-sidebar__item-title,
.sa-news-sidebar__item-meta {
    display: block;
    font-size: 12px;
}

.sa-news-sidebar__item:hover {
    background-color: #f9fafb;
}

.sa-news-sidebar__item-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    line-height: 1.3;
}

.sa-news-sidebar__item:hover .sa-news-sidebar__item-title {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
}

.sa-news-sidebar__item-section {
    color: #000;
}

.sa-news-sidebar__item-date {
    font-size: 12px;
    color: #9ca3af;
}

.sa-news-sidebar__empty {
    font-size: 11px;
    color: #888;
    padding: 5px 0 15px;
}

.sa-activities {
    margin-bottom: 24px;
}

.sa-activities__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-activities__list {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.sa-activities__item {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    line-height: 1.3;
}

.sa-activities__date {
    color: #9ca3af;
}

.sa-activities__empty {
    font-size: 11px;
    color: #888;
    padding: 5px 0 15px;
}

/* === External RSS feeds sidebar === */
.sa-rss-feed {
    margin-bottom: 24px;
}

.sa-rss-feed__title {
    font-family: var(--sa-body-font);
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-rss-feed__list {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.sa-rss-feed__item {
    border-bottom: 1px solid #e5e7eb;
}

.sa-rss-feed__link {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.3;
    color: #374151;
    text-decoration: none;
}

.sa-rss-feed__link:hover {
    background-color: #f9fafb;
    text-decoration: none;
}

.sa-rss-feed__item-title {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-weight: 500;
}

.sa-rss-feed__item-date {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: #8b92a0;
}

/* === Representation team upcoming matches (main section sidebar) === */
.sa-rep-games {
    margin-bottom: 24px;
}

.sa-rep-games__title {
    font-family: var(--sa-body-font);
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-rep-games__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.sa-rep-games__card {
    display: block;
    padding: 12px;
    color: #374151;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    transition: background-color 0.15s, border-color 0.15s;
}

.sa-rep-games__card:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    text-decoration: none;
}

.sa-rep-games__section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 8px;
    text-align: center;
}

.sa-rep-games__matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.sa-rep-games__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.sa-rep-games__logo {
    height: 36px;
    max-width: 60px;
    object-fit: contain;
}

.sa-rep-games__team-name {
    font-size: 12px;
    line-height: 1.2;
    color: #374151;
    overflow-wrap: anywhere;
}

.sa-rep-games__team-name--ours {
    font-weight: 700;
}

.sa-rep-games__vs {
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.sa-rep-games__meta {
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
}

/* === Upcoming Games sidebar === */
.sa-upcoming-games {
    margin-bottom: 24px;
}

.sa-upcoming-games__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-upcoming-games__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-upcoming-games__item {
    border-bottom: 1px solid #e5e7eb;
}

.sa-upcoming-games__link {
    display: block;
    padding: 6px 0;
    color: #374151;
    text-decoration: none;
}

.sa-upcoming-games__link:hover {
    background-color: #f9fafb;
    text-decoration: none;
}

.sa-upcoming-games__meta {
    font-size: 10px;
    line-height: 1.2;
    color: #8b92A0;
    margin-top: 0px;
    margin-left: 28px;
}

.sa-upcoming-games__team {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 12px;
    line-height: 1.2;
}

.sa-upcoming-games__team-logo {
    flex: 0 0 22px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-upcoming-games__team-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sa-upcoming-games__team-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-upcoming-games__team-score {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* === Pagination === */
.sa-pagination {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 20px;
}

.sa-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    color: #000000;
    transition: background-color 0.15s ease;
}

.sa-pagination__link:hover {
    background-color: var(--sa-hover-bg);
    text-decoration: none;
}

.sa-pagination__link--active {
    background-color: #000000;
    color: #ffffff;
}

.sa-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: #888888;
}

/* === Calendar (list view) === */
.sa-calendar {
    width: 100%;
}

.sa-calendar__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.sa-calendar__subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sa-calendar__subscribe-btn:hover {
    background-color: #f3f4f6;
}

.sa-subscribe-panel {
    display: none;
    margin-bottom: 16px;
    padding: 14px 16px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}

.sa-subscribe-panel--open {
    display: block;
}

.sa-subscribe-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.sa-subscribe-panel h4 {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.sa-subscribe-panel ol {
    margin: 0 0 8px 18px;
    padding: 0;
}

.sa-subscribe-panel li {
    margin: 6px 0;
}

.sa-subscribe-panel__copy {
    margin-top: 6px;
    padding: 4px 12px;
    background-color: var(--sa-primary-color, #333);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.sa-subscribe-panel__copy:hover {
    opacity: 0.9;
}

.sa-subscribe-panel__error {
    margin: 0;
    color: #b91c1c;
}

.sa-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s;
}

.sa-calendar__nav:hover {
    background-color: var(--sa-hover-bg, #f0f0f0);
    text-decoration: none;
}

.sa-calendar__month {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.sa-calendar__loading,
.sa-calendar__empty {
    padding: 24px 0;
    color: #6b7280;
    font-style: italic;
}

.sa-calendar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.sa-calendar__filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-calendar__filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-calendar__filter-select {
    padding: 4px 26px 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.sa-calendar__type-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sa-calendar__pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.sa-calendar__pill:hover {
    background-color: #f3f4f6;
    text-decoration: none;
}

.sa-calendar__pill--active {
    background-color: var(--sa-primary-color, #333);
    border-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #fff);
}

.sa-calendar__pill--active:hover {
    background-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #fff);
}

.sa-calendar__event-label {
    font-weight: 400;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    text-decoration: none;
}

.sa-calendar__event-label:hover {
    text-decoration: underline;
}

.sa-calendar__week-header {
    padding: 6px 10px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f3f4f6;
    border-radius: 4px;
}

.sa-calendar__week-header:first-child {
    margin-top: 0;
}

.sa-calendar__date-group {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #e5e7eb;
}

.sa-calendar__date-label {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    padding-top: 1px;
}

.sa-calendar__date-number {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: #6b7280;
}

.sa-calendar__date-day {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: capitalize;
}

.sa-calendar__events {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sa-calendar__event {
    display: flex;
    gap: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.35;
}

.sa-calendar__event:hover {
    background-color: #f9fafb;
}

.sa-calendar__event-time {
    flex-shrink: 0;
    width: 90px;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

.sa-calendar__time-separator {
    margin: 0 2px;
    color: #9ca3af;
}

.sa-calendar__time-multiday {
    font-style: italic;
    color: #6b7280;
    margin-right: 4px;
}

.sa-calendar__event-details {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #374151;
}

.sa-calendar__event-sep {
    margin: 0 4px;
    color: #9ca3af;
}

.sa-calendar__event-heading {
    color: #374151;
}

.sa-calendar__event-location {
    color: #6b7280;
}

.sa-calendar__event-link {
    color: inherit;
    text-decoration: none;
}

.sa-calendar__event-link:hover .sa-calendar__event-heading {
    text-decoration: underline;
}

.sa-calendar__event--game .sa-calendar__event-heading,
.sa-calendar__event--game .sa-calendar__event-time {
    font-weight: 700;
}

/* === Documents (folder/file tree) === */
.sa-doc-tree {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
}

.sa-doc-tree__folder + .sa-doc-tree__folder {
    margin-top: 2px;
}

.sa-doc-tree__details {
    border: 0;
}

.sa-doc-tree__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

.sa-doc-tree .sa-doc-tree__row--alt {
    background-color: #f8f8f8;
}

.sa-doc-tree__summary::-webkit-details-marker {
    display: none;
}

.sa-doc-tree__summary:hover,
.sa-doc-tree__file:hover {
    background-color: #e8e8e8;
}

.sa-doc-tree__chevron {
    width: 12px;
    color: #888;
    transition: transform 0.15s ease;
    font-size: 11px;
}

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__chevron {
    transform: rotate(90deg);
}

.sa-doc-tree__folder-icon {
    width: 16px;
    color: #e8b745;
}

.sa-doc-tree__folder-icon--open { display: none; }

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__folder-icon--closed {
    display: none;
}

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__folder-icon--open {
    display: inline-block;
}

.sa-doc-tree__folder-name {
    font-weight: 600;
}

.sa-doc-tree__count {
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

.sa-doc-tree__files {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-doc-tree__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 36px;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

.sa-doc-tree__file--root {
    padding-left: 28px;
}

.sa-doc-tree__file-icon {
    width: 14px;
    color: #888;
    font-size: 13px;
}

.sa-doc-tree__file-name {
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.sa-doc-tree__file-name:hover {
    text-decoration: underline;
}

.sa-doc-tree__file-desc {
    color: #666;
    font-size: 12px;
    font-style: italic;
}

.sa-doc-tree__file-meta {
    display: flex;
    font-size: 12px;
    color: #999;
}

.sa-doc-tree__file-meta-cell {
    padding: 0 10px;
    text-align: right;
    white-space: nowrap;
    border-left: 1px solid #e0e0e0;
}

.sa-doc-tree__file-meta-cell--size {
    width: 70px;
}

.sa-doc-tree__file-meta-cell--date {
    width: 120px;
    padding-right: 4px;
}

.sa-doc-tree__empty {
    padding: 6px 28px;
    margin: 0;
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/* === Gallery === */
.sa-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.sa-gallery__album {
    width: calc(33.333% - 10px);
    border: 1px solid #ddd;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.sa-gallery__album:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sa-gallery__album-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.sa-gallery__album-info {
    padding: 8px 10px;
}

.sa-gallery__album-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.sa-gallery__album-count {
    font-size: 12px;
    color: #999;
}

/* === Groups/Teams === */
.sa-team__hero {
    margin-bottom: 20px;
}

/* The mat-and-drop-shadow picture frame came over from the ASP site. Dropped in
   favour of the bare photo with a small radius - the frame reads as dated, and on
   a light page the white mat just fattened the image without separating it. */
.sa-team__hero a {
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
}

/* Radius sits on the image rather than the anchor: with the padding gone the anchor
   hugs the image, so rounding the image needs no overflow clipping to hold. */
.sa-team__hero-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.sa-team__group-filter {
    margin-bottom: 12px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    max-width: 320px;
}

.sa-team__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-items: start;
}

.sa-team__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-team__list > li {
    border-top: 1px solid #e5e7eb;
}

.sa-team__list > li:last-child {
    border-bottom: 1px solid #e5e7eb;
}

.sa-team__list-header {
    font-weight: 700;
    font-size: 14px;
    padding: 16px 8px 6px;
    border-top: none !important;
    border-bottom: 1px solid #cccccc;
}

.sa-team__list-header + li {
    border-top: none;
}

.sa-team__member {
    border: none;
}

.sa-team__member-summary {
    list-style: none;
    cursor: pointer;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
    transition: background-color 0.15s;
}

.sa-team__member-summary::-webkit-details-marker,
.sa-team__member-summary::marker {
    display: none;
    content: '';
}

.sa-team__member-summary::after {
    content: '\203A';
    font-size: 18px;
    color: #9ca3af;
    margin-left: auto;
    transition: transform 0.15s;
}

.sa-team__member[open] > .sa-team__member-summary::after {
    transform: rotate(90deg);
}

.sa-team__member-summary:hover {
    background-color: #f8f8f8;
}

.sa-team__member-photo {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}

.sa-team__member-detail-photo {
    flex: 0 0 auto;
    width: 90px;
    height: auto;
    border: 1px solid #dddddd;
    padding: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.5);
    display: block;
}

.sa-team__member-name {
    font-weight: 400;
    font-size: 14px;
    flex: 1;
}

.sa-team__member-role {
    font-size: 12px;
    color: #6b7280;
}

.sa-team__member-age {
    font-size: 12px;
    color: #9ca3af;
}

.sa-team__member-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #ffffff);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    opacity: 0.75;
}

.sa-team__member-detail-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 16px 10px;
    background-color: #fafafa;
}

.sa-team__member-details {
    margin: 0;
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    font-size: 13px;
}

.sa-team__member-details dt {
    font-weight: 600;
    color: #374151;
}

.sa-team__member-details dd {
    margin: 0;
    color: #4b5563;
}

.sa-team__member-description {
    grid-column: 1 / -1;
    margin-top: 8px !important;
    color: #4b5563;
    white-space: pre-wrap;
}

.sa-team__member-empty {
    grid-column: 1 / -1;
    color: #9ca3af;
}

.sa-group-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.sa-group-list__section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--sa-primary-color, #333);
}

.sa-group-list__section-title:first-of-type {
    margin-top: 12px;
}

.sa-group-list__row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.sa-group-list__row:hover {
    background-color: #fafafa;
}

.sa-group-list__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eee;
}

.sa-group-list__name {
    flex: 1 1 40%;
    font-weight: 500;
}

.sa-group-list__role {
    flex: 1 1 35%;
    color: #6b7280;
}

.sa-group-list__contact {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    min-width: 50px;
    justify-content: flex-end;
}

.sa-group-list__contact-link {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}

.sa-group-list__contact-link:hover {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
}

.sa-loading {
    color: #6b7280;
    font-style: italic;
    padding: 16px 0;
}

.sa-empty {
    color: #9ca3af;
    font-style: italic;
    padding: 16px 0;
}

/* === Klaro Cookie Consent === */
/* Wider notice (Klaro caps it at 400px on desktop) so the text and the stacked
   actions get room. max-width also caps it on tablets; on phones the notice is
   full-width below this, so it just fills the screen up to 520px. The shadow
   lifts it off the page whether it's floating (desktop) or sitting flush at the
   bottom edge (phones). */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: 520px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.28);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 20px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* "Anpassa dina val" gets the row above the actions, anchored left. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
}

/* The actions take their own full-width row under the learn-more link
   (width:100% is what forces .cn-buttons to wrap in .cn-ok). Flex rather than
   Klaro's inline-blocks, whose inline whitespace pushed the second button onto a
   line of its own at half width. Desktop splits the row 50/50; the mobile
   breakpoint below stacks them. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
}

/* basis 0 + equal grow = an exact 50/50 split. min-width:auto floors each button
   at its nowrap label, so a long translated label wraps the row rather than
   spilling out of the button.

   `button` in the selector is load-bearing, not decoration: Klaro's own
   @media(max-width:384px) rules are `… .cn-buttons button.cm-btn { width:
   calc(50% - 0.5em) }` and `… button.cm-btn { margin-top: .5em }`. Drop the
   element qualifier and this rule is one step less specific, so Klaro wins on
   the narrowest phones. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 0;
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

/* Mobile: one full-width button per row. 980px is the layout's mobile
   breakpoint (where .sa-mobile-header takes over) — keep the two in step rather
   than giving the notice a breakpoint of its own. Lives here with the rest of
   the Klaro overrides instead of in the main 980px block, so the cascade
   argument above stays readable in one place. */
@media (max-width: 980px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        flex-flow: column nowrap;
    }

    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
        flex: 0 0 auto;
        width: 100%;
    }
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
    font-size: 16px;
}

.klaro .cookie-modal p,
.klaro .cookie-notice p,
.klaro .cookie-modal h1,
.klaro .cookie-modal li {
    color: #000000;
    line-height: 20px;
}

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
    padding: 8px 15px;
    background-color: #eeeeee;
    color: #000;
}

.klaro .cookie-modal .cm-btn.cm-btn-info.cm-btn.cm-btn-success {
    background-color: var(--sa-secondary-color);
    color: #ffffff;
}

.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success {
    background-color: var(--sa-primary-color);
    color: #ffffff;
}

.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #ffffff;
}

.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--sa-link-color, var(--sa-primary-color));
}

.klaro .cookie-notice a:focus,
.klaro .cookie-modal a:focus {
    border: none;
    outline: none;
}

.klaro .cookie-modal .slider,
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: none;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--sa-primary-color);
}

/* === Footer === */
.sa-footer {
    display: flex;
    align-items: center;
    padding: 15px;
    border-top: 1px solid #cccccc;
    background: #ffffff;
    color: #666;
    font-size: 12px;
}

.sa-footer a {
    color: #666;
}

.sa-footer a:hover {
    text-decoration: underline;
}

.sa-footer__powered {
    margin-left: auto;
}

.sa-footer__powered img {
    width: 180px;
    display: block;
}

.sa-footer__social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.sa-footer__social img {
    width: 24px;
    height: 24px;
}

/* === Mobile Navigation === */

/* === Mobile site header (MobileHeader.razor) ===
   Below 980px the desktop chrome — .sa-header, .sa-section-tabs and the
   .sa-submenu-bar rows — is replaced by this two-row header, so the club's
   colours survive on a phone:
     row 1  logo on --sa-primary-color, with a select-style control in the top
            right naming the current section and dropping down a flat list of
            them all (.sa-topmenu)
     row 2  breadcrumbs on --sa-secondary-color for the current second/third
            level; each crumb opens the page drawer (.sa-drawer) at that level
   Sticky, because it carries the only nav on mobile — the fixed hamburger it
   replaced stayed reachable down a long page and this has to as well. It trims
   itself once the page moves; see the compact block at the end of this section.
   Hidden by default and switched on in the mobile media query below, so the
   markup can render unconditionally. */
.sa-mobile-header {
    display: none;
    position: sticky;
    top: 0;
    /* Under the drawer + its backdrop (1290/1300), above page content. */
    z-index: 1200;
}

.sa-mobile-header__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background-color: var(--sa-primary-color, #003380);
    color: var(--sa-on-primary, #ffffff);
    transition: padding 0.18s ease;
}

.sa-mobile-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
}

.sa-mobile-header__brand:hover {
    text-decoration: none;
}

.sa-mobile-header__logo {
    flex: 0 0 auto;
    height: auto;
    max-height: 48px;
    max-width: 110px;
    object-fit: contain;
    transition: max-height 0.18s ease;
}

/* Only rendered when the club has no logo. Club names are long and the bar has
   to stay compact, so clamp to two rows rather than letting it grow. */
.sa-mobile-header__title {
    min-width: 0;
    font-family: var(--sa-nav-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: font-size 0.18s ease;
}

.sa-mobile-header__menu {
    position: relative;
    flex: 0 0 auto;
}

/* Reads as a <select>: the closed control names the section you're in, so the
   header still answers "where am I" without the club name taking up the bar. */
.sa-mobile-header__section-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 55vw;
    min-height: 40px;
    padding: 7px 11px;
    /* Translucent white lifts the control off the club colour without pinning it
       to a second palette — it brightens any primary, dark or light. */
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Derive the outline from the text colour so it stays visible whichever of
       black/white --sa-on-primary resolved to. */
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 4px;
    color: inherit;
    font-family: var(--sa-nav-font);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: min-height 0.18s ease, padding 0.18s ease;
}

.sa-mobile-header__section-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-mobile-header__section-icon {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.sa-mobile-header__menu--open .sa-mobile-header__section-icon {
    transform: rotate(180deg);
}

/* Top-level (section) menu. Anchored under the button in the top right; opened
   by .sa-mobile-header__menu--open (wwwroot/js/mobile-menu.js). Sits below the
   drawer's z-index — opening the drawer closes this. */
.sa-topmenu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1250;
    min-width: 230px;
    max-width: min(86vw, 340px);
    max-height: calc(100vh - 120px);
    /* dvh tracks mobile browser UI collapsing; vh above is the fallback. */
    max-height: calc(100dvh - 120px);
    overflow: hidden auto;
    background-color: #ffffff;
    color: #000000;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.sa-mobile-header__menu--open .sa-topmenu {
    display: block;
}

.sa-topmenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #eeeeee;
    color: #000000;
    font-family: var(--sa-nav-font);
    font-size: 15px;
    text-decoration: none;
}

.sa-topmenu__item-label {
    flex: 1 1 auto;
}

/* Active section: left accent bar in the club's primary colour, subtle tint,
   bold — same treatment as the drawer. */
.sa-topmenu__item--active {
    background-color: var(--sa-hover-bg, #f2f2f2);
    box-shadow: inset 3px 0 0 var(--sa-primary-color, #003380);
    font-weight: 700;
}

.sa-topmenu__login {
    padding: 10px 14px 14px;
    border-top: 1px solid #e0e0e0;
}

.sa-topmenu__login-title {
    margin-bottom: 6px;
    font-family: var(--sa-nav-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555555;
}

.sa-topmenu__login p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
}

.sa-topmenu__login p:last-child {
    margin-bottom: 0;
}

.sa-topmenu__login a {
    color: var(--sa-link-color, var(--sa-primary-color));
    text-decoration: underline;
}

/* Breadcrumb row — a hamburger that opens the drawer, then a read-only trail of
   where you are. Single line: the trail ellipsises rather than wrapping, so the
   row's height doesn't move around between pages. */
.sa-mobile-header__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    transition: padding 0.18s ease;
}

.sa-crumb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    /* Derive the outline from the text colour so it stays visible whichever of
       black/white --sa-on-secondary resolved to. */
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 4px;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: width 0.18s ease, height 0.18s ease;
}

.sa-crumb-path {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--sa-nav-font);
    font-size: 13px;
    text-transform: uppercase;
}

.sa-crumb-path__item {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The trail leading to the current page is context, not the headline — it gives
   up width first (shrink 3 vs 1) and sits back a shade. */
.sa-crumb-path__item:not(.sa-crumb-path__item--current) {
    flex-shrink: 3;
    opacity: 0.8;
}

.sa-crumb-path__item--current {
    font-weight: 700;
}

.sa-crumb-path__sep {
    flex: 0 0 auto;
    font-size: 9px;
    opacity: 0.6;
}

/* Compact state — html.sa-scrolled, set by wwwroot/js/mobile-menu.js once the
   page has scrolled past ~48px. Only the sizes that buy back vertical room
   change (paddings, logo, control heights); colours, layout and the breadcrumb
   trail stay put, so the header keeps its identity while taking ~40px less. The
   transitions live on the base rules above so both directions animate. */
.sa-scrolled .sa-mobile-header__bar {
    padding-top: 3px;
    padding-bottom: 3px;
}

.sa-scrolled .sa-mobile-header__logo {
    max-height: 30px;
}

.sa-scrolled .sa-mobile-header__title {
    font-size: 14px;
    -webkit-line-clamp: 1;
}

.sa-scrolled .sa-mobile-header__section-btn {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.sa-scrolled .sa-mobile-header__crumbs {
    padding-top: 2px;
    padding-bottom: 2px;
}

.sa-scrolled .sa-crumb-toggle {
    width: 28px;
    height: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .sa-mobile-header__bar,
    .sa-mobile-header__logo,
    .sa-mobile-header__title,
    .sa-mobile-header__section-btn,
    .sa-mobile-header__crumbs,
    .sa-crumb-toggle {
        transition: none;
    }
}

/* === Mobile menu drawer (MobileMenu.razor) ===
   Second/third-level page menu for the current section, opened from the header
   breadcrumbs above. The drawer and backdrop stay off-screen/hidden until
   body.sa-drawer-open is set (toggled by wwwroot/js/mobile-menu.js). Submenu
   panels overlay the root panel and slide in from the right when given
   .sa-drawer__panel--active. */
.sa-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.sa-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1300;
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

body.sa-drawer-open {
    overflow: hidden;
}

body.sa-drawer-open .sa-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
}

body.sa-drawer-open .sa-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.sa-drawer__viewport {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sa-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow-y: auto;
}

.sa-drawer__panel--sub {
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.sa-drawer__panel--sub.sa-drawer__panel--active {
    transform: translateX(0);
}

.sa-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
}

.sa-drawer__title {
    font-family: var(--sa-nav-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    color: #000000;
}

.sa-drawer__icon-btn,
.sa-drawer__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: none;
    border: none;
    color: #333333;
    font-family: var(--sa-nav-font);
    font-size: 15px;
    cursor: pointer;
}

.sa-drawer__list {
    display: flex;
    flex-direction: column;
}

.sa-drawer__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #eeeeee;
    color: #000000;
    font-family: var(--sa-nav-font);
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sa-drawer__item-label {
    flex: 1 1 auto;
}

/* Active page / section (and the group leading to it): left accent bar in the
   club's primary colour, subtle tint, bold. */
.sa-drawer__item--active {
    background-color: var(--sa-hover-bg, #f2f2f2);
    box-shadow: inset 3px 0 0 var(--sa-primary-color, #003380);
    font-weight: 700;
}

.sa-drawer__arrow {
    color: #999999;
    font-size: 13px;
}

.sa-drawer__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #eeeeee;
}

.sa-drawer__row .sa-drawer__item {
    flex: 1 1 auto;
    border-bottom: none;
}

.sa-drawer__arrow-btn {
    flex: 0 0 auto;
    padding: 0 18px;
    background: none;
    border: none;
    border-left: 1px solid #eeeeee;
    color: #999999;
    cursor: pointer;
}

.sa-drawer__section-label {
    padding: 14px 16px 8px;
    font-family: var(--sa-body-font);
    font-size: 16px;
    font-weight: 600;
    color: #555555;
}

/* In a submenu panel this label is the submenu's title (under the back link),
   so render it as a prominent heading rather than a small caption. */
.sa-drawer__panel--sub .sa-drawer__section-label {
    padding: 4px 16px 12px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #000000;
}

/* === Activity detail card === */
.sa-activity-detail {
    width: 100%;
}

.sa-activity-detail__header {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.sa-activity-detail__sep {
    margin: 0 6px;
    color: #9ca3af;
}

.sa-activity-detail__title {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.sa-activity-detail__cancelled-tag {
    margin-left: 10px;
    font-size: 14px;
    color: #b91c1c;
    text-decoration: none;
}

.sa-activity-detail__cancelled-banner {
    margin: 0 0 12px;
    padding: 8px 12px;
    background-color: #fef2f2;
    border-left: 3px solid #b91c1c;
    color: #b91c1c;
    font-weight: 600;
    font-size: 14px;
}

.sa-activity-detail--cancelled .sa-activity-detail__title strong,
.sa-activity-detail--cancelled .sa-activity-detail__team-name {
    text-decoration: line-through;
    color: #9ca3af;
}

.sa-activity-detail__matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px 0 24px;
}

.sa-activity-detail__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.sa-activity-detail__team-logo {
    max-height: 64px;
    max-width: 96px;
    object-fit: contain;
}

.sa-activity-detail__team-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.sa-activity-detail__score {
    text-align: center;
    min-width: 80px;
}

.sa-activity-detail__score-value {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.sa-activity-detail__score-empty {
    font-size: 22px;
    color: #9ca3af;
    white-space: nowrap;
}

.sa-activity-detail__score-vs {
    font-size: 18px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.sa-activity-detail__section-title {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
    font-weight: 600;
}

.sa-activity-detail__meta {
    display: grid;
    /* "Matchnummer" is wider than the 80px this used to be fixed at. Let the label
       track grow to the widest label actually present, so activities without one
       keep the original 80px and nothing shifts. */
    grid-template-columns: minmax(80px, max-content) 1fr;
    gap: 8px 16px;
    margin: 0 0 18px;
    padding: 0;
    font-size: 14px;
    color: #374151;
}

.sa-activity-detail__meta dt {
    font-weight: 600;
    color: #6b7280;
}

.sa-activity-detail__meta dd {
    margin: 0;
}

/* "Tabell >>" trails the series name on the same row, as it did on the ASP site. */
.sa-activity-detail__table-link {
    margin-left: 8px;
    white-space: nowrap;
}

/* "<< Tillbaka" closes the detail view, as it did on the ASP site. Sits below the
   information block with enough room that it doesn't read as part of it. */
.sa-activity-detail__back {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
}

.sa-activity-detail__description {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

.sa-activity-detail__description p {
    margin: 0 0 8px;
}

/* === Elite design overrides ===
   Activated when hArea.HasEliteDesign = 1. Wraps the layout so:
   - Topmenu (section tabs) and submenu span the full viewport width.
   - Submenu is the row directly under the topmenu.
   - Logo is absolutely positioned at the top-left of the page.
   - The news carousel spans the full page width.
*/
.sa--elite {
    position: relative;
}

/* Centered at 1250px, but a ::before pseudo-element paints the bg color
   across the full viewport horizontally without clipping the children
   (so dropdowns that extend below the bar still render). */
.sa--elite .sa-section-tabs,
.sa--elite .sa-submenu-bar {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    position: relative;
    background-color: transparent;
}

.sa--elite .sa-section-tabs::before,
.sa--elite .sa-submenu-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
}

.sa--elite .sa-section-tabs::before {
    background-color: var(--sa-primary-color, #003380);
}

.sa--elite .sa-submenu-bar::before {
    background-color: var(--sa-secondary-color);
}

/* Push the first item past the absolute logo. */
.sa--elite .sa-section-tabs__list > :first-child,
.sa--elite .sa-submenu-bar > :first-child {
    margin-left: 60px;
}

.sa--elite .sa-layout-wrapper {
    max-width: 1250px;
    padding-left: 25px;
    padding-right: 25px;
    background: #ffffff;
    box-shadow: none;
}

.sa--elite .sa-section-tabs {
    margin-top: 0;
    box-shadow: none;
}

.sa--elite .sa-submenu-bar {
    background-color: var(--sa-secondary-color);
    border-bottom: 0;
}

.sa--elite .sa-submenu-bar__item {
    text-transform: none;
    color: var(--sa-on-secondary, #ffffff);
}

.sa--elite .sa-submenu-bar__item:hover {
    background-color: transparent;
    box-shadow: inset 0 -3px 0 var(--sa-on-secondary, #ffffff);
    color: var(--sa-on-secondary, #ffffff);
}

.sa--elite .sa-submenu-bar__item--active {
    box-shadow: inset 0 -3px 0 var(--sa-on-secondary, #ffffff);
    color: var(--sa-on-secondary, #ffffff);
}

/* Third-level (sub-)submenu: light gray bar with black text. */
.sa--elite .sa-submenu-bar--sub {
    background-color: #f8f8f8;
}

.sa--elite .sa-submenu-bar--sub::before {
    background-color: #f8f8f8;
}

.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item {
    color: #000000;
}

.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item:hover,
.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item--active {
    background-color: transparent;
    box-shadow: inset 0 -3px 0 #000000;
    color: #000000;
}

.sa-elite-logo {
    position: absolute;
    top: 5px;
    left: 15px;
    height: auto;
    width: auto;
    max-width: 90px;
    z-index: 1100;
}

.sa--elite-section .sa-elite-logo {
    max-width: 90px;
    height: auto;
}

/* When the viewport can't fit the page plus a logo column on each side,
   shrink the floating logo and tuck it into the left of the menu bar so it
   doesn't overlap the tabs. Logos aren't always square, so cap both
   dimensions independently. */
@media (max-width: 1350px) {
    .sa-elite-logo {
        top: 8px;
        left: 8px;
        height: auto;
        max-height: 60px;
        max-width: 60px;
    }

    .sa--elite .sa-section-tabs__list > :first-child,
    .sa--elite .sa-submenu-bar > :first-child {
        margin-left: 80px;
    }
}

.sa--elite .sa-carousel-wrapper {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

.sa--elite .sa-carousel__slide {
    height: 650px;
}

/* Bottom-up shadow over the image so light photos don't wash out the title. */
.sa--elite .sa-carousel__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
    z-index: 1;
}

.sa--elite .sa-carousel__overlay {
    z-index: 2;
    bottom: 40px;
    left: 0;
    right: 0;
    /* Mirror the elite content's effective inner padding: 25px on
       .sa-layout-wrapper plus 20px on .sa-layout__content = 45px, so the
       title and "Läs mer" pill align with the page content edges. */
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 45px;
    background: none;
    border-radius: 0;
    min-width: 0;
    text-align: left;
    transform: none;
}

.sa--elite .sa-carousel__title {
    font-size: 42px;
    margin: 0;
}

.sa--elite .sa-carousel__date {
    display: none;
}

.sa--elite .sa-carousel__overlay::after {
    content: "Läs mer";
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 30px;
    padding: 10px 16px;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    line-height: 1;
}

@media (max-width: 1200px) {
    .sa--elite .sa-carousel__slide {
        height: 450px;
    }
}

/* === External link indicator === */
.sa-external-link-icon {
    margin-left: 6px;
    font-size: 0.75em;
    opacity: 0.7;
}

/* === Matches === */
.sa-matches {
    width: 100%;
}

.sa-matches__filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sa-matches__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sa-matches__filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-matches__filter-select {
    padding: 4px 26px 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.sa-matches__heading {
    margin: 18px 0 6px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    font-size: 18px;
    font-weight: 600;
}

/* That 18px separates Kommande from Spelade, but on the first heading it stacks
   onto the layout's own top gap and pushed this page's title 18px lower than the
   heading on every other page. Only drop it when the heading opens the page - if a
   filter bar comes first it is no longer :first-child and keeps its separation. */
.sa-matches__heading:first-child {
    margin-top: 0;
}

.sa-matches__loading,
.sa-matches__empty {
    padding: 16px 0;
    color: #6b7280;
    font-style: italic;
}

.sa-matches__month {
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-matches__row {
    display: grid;
    grid-template-columns: 26px 38px 48px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.sa-matches__row--cancelled .sa-matches__team-name {
    color: #9ca3af;
    text-decoration: line-through;
}

.sa-matches__day {
    font-weight: 700;
    color: #374151;
    text-align: right;
    white-space: nowrap;
}

.sa-matches__weekday {
    color: #6b7280;
    text-transform: lowercase;
    white-space: nowrap;
}

.sa-matches__time {
    color: #374151;
    white-space: nowrap;
}

.sa-matches__group {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
}

.sa-matches__group-link {
    color: inherit;
    text-decoration: none;
}

.sa-matches__group-link:hover {
    text-decoration: underline;
}

.sa-matches__team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Fixed box (not max-*) so every logo occupies the same width and the team
   names line up vertically regardless of each logo's aspect ratio. */
.sa-matches__team-logo {
    flex-shrink: 0;
    width: 24px;
    height: 20px;
    object-fit: contain;
}

.sa-matches__team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The club's own team is bolded so it stands out in the home/away pair. */
.sa-matches__team-name--own {
    font-weight: 700;
}

.sa-matches__team:hover .sa-matches__team-name {
    text-decoration: underline;
}

.sa-matches__team--single {
    grid-column: span 2;
}

.sa-matches__score {
    text-align: right;
    min-width: 52px;
    color: #374151;
    white-space: nowrap;
}

.sa-matches__score-empty {
    color: #9ca3af;
}

.sa-matches__more {
    display: inline-block;
    margin-top: 8px;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-size: 13px;
    text-decoration: none;
}

.sa-matches__more:hover {
    text-decoration: underline;
}

/* === Responsive === */

/* Tablet */
/* Mobile */
@media (max-width: 980px) {
    /* One source of truth for the mobile side gutter. It used to come from two
       places that disagreed: .sa-layout__content dropped to padding:0 here while
       .sa--elite .sa-layout-wrapper kept its 25px at every width, so classic
       clubs ran text flush to the screen edge and elite clubs sat inset. Now the
       elite inset is zeroed below and every gutter derives from this. */
    :root {
        --sa-mobile-gutter: 12px;
        /* Same idea vertically. Without it the page heading sat flush against the
           header bar; the ASP site left a much larger gap than we want back. */
        --sa-mobile-top-gap: 16px;
    }

    .sa-team__columns {
        grid-template-columns: 1fr;
    }

    .sa-carousel__slide {
        height: 250px;
    }

    .sa-carousel__overlay {
        padding: 32px 16px 16px;
    }

    .sa--elite .sa-carousel__overlay {
        bottom: 24px;
        padding: 0 var(--sa-mobile-gutter);
    }

    .sa-carousel__title {
        font-size: 18px;
    }

    .sa-carousel__nav {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .sa-carousel__nav--prev {
        left: 8px;
    }

    .sa-carousel__nav--next {
        right: 8px;
    }

    /* All three desktop chrome rows — the old-design banner, the section tab
       bar and the submenu bars — hand over to .sa-mobile-header, which carries
       the logo, the top-level dropdown and the current-level breadcrumbs in
       the club's colours. The elite design's floating logo goes with them; the
       mobile header renders its own. */
    .sa-header,
    .sa-section-tabs,
    .sa-submenu-bar,
    .sa-elite-logo {
        display: none;
    }

    /* The 25px gutter the centered 1250px elite design needs is desktop-only —
       on mobile the gutter above covers it. .sa--elite has to stay in the
       selector: the base rule is (0,2,0), so a bare .sa-layout-wrapper would
       lose here whatever the source order. */
    .sa--elite .sa-layout-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .sa-mobile-header {
        display: block;
    }

    .sa-layout__content {
        width: 100%;
        padding: var(--sa-mobile-top-gap) var(--sa-mobile-gutter) 0;
    }

    /* Pull the hero back out through the gutter so it still meets both screen
       edges. (The elite variant does this itself with calc(50% - 50vw) margins,
       which re-derive from whatever the content box is — no change needed.) */
    .sa-carousel-wrapper {
        margin: calc(-1 * var(--sa-mobile-top-gap)) calc(-1 * var(--sa-mobile-gutter)) 0;
    }

    .sa-start-columns {
        flex-direction: column;
    }

    .sa-start-columns__sidebar {
        width: 100%;
    }

    /* Once the columns stack there is nothing beside them, so the vertical
       divider that separates them on desktop is just a stray dotted line down
       the content edge - and the 14px it reserved for itself now shifts the
       column off-centre. Legacy never hit this: it hid .tbl2 outright on
       mobile (saResponsive.css) so no divider survived the breakpoint. */
    .sa-start-columns__main,
    .sa-start-columns__sidebar {
        border-right: 0;
        padding-right: 0;
    }

    /* On mobile the full pillar is replaced by the rotator strip below — one
       mobile-flagged ad at a time above the content (gh#201, legacy parity).
       Stacking every ad below the content hid them in practice, and stacking
       them above it (the older order: -1 layout) forced users to scroll past
       every ad to reach the news. */
    .sa-ad-sidebar {
        display: none;
    }

    /* order: -1 hoists the rotator above the main content: every page renders
       <AdSidebar /> as the last direct child of the .sa-start-columns flex
       container, which is a column at this width. */
    .sa-ad-rotator {
        display: grid;
        order: -1;
        height: 120px;
        margin-bottom: 10px;
    }

    /* Slides stack in one grid cell (same cross-fade mechanics as the pillar's
       slideshow groups); each slide centres its ad both ways so a smaller ad
       floats in the middle of the strip instead of hugging the top-left. */
    .sa-ad-rotator .sa-ad-sidebar__group-page {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sa-ad-rotator img {
        display: block;
        max-width: 100%;
        max-height: 120px;
        width: auto;
        border-radius: 5px;
    }

    .sa-section {
        flex-direction: column;
        gap: 10px;
    }

    .sa-section__menu {
        width: 100%;
    }

    .sa-sub-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-paragraph--image-right,
    .sa-paragraph--image-left {
        flex-direction: column;
    }

    .sa-paragraph--image-right .sa-paragraph__figure-wrap,
    .sa-paragraph--image-left .sa-paragraph__figure-wrap {
        float: none;
        max-width: 100%;
        margin: 10px 0;
        order: 0;
    }

    .sa-calendar__date-group {
        flex-direction: column;
        gap: 8px;
    }

    .sa-calendar__date-label {
        display: flex;
        gap: 6px;
        align-items: baseline;
        width: auto;
        text-align: left;
        padding-left: 4px;
    }

    .sa-calendar__date-number {
        font-size: 16px;
    }

    .sa-calendar__event {
        flex-direction: column;
        gap: 2px;
    }

    .sa-calendar__event-time {
        width: auto;
        font-size: 13px;
    }

    .sa-gallery__album {
        width: 100%;
    }

    .sa-group-list__row {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .sa-group-list__name {
        flex: 1 1 100%;
    }

    .sa-group-list__role {
        flex: 1 1 auto;
    }

    /* The group column repeats the team whose page you are already on, and at this
       width it truncated to "Seniorl…" while squeezing the actual team names either
       side of it. Dropped, with its track, so the teams get the room. The location
       shares that cell and was equally unreadable; both stay on the row's title. */
    .sa-matches__group {
        display: none;
    }

    .sa-matches__row {
        grid-template-columns: 22px 30px 42px minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .sa-matches__team-logo {
        display: none;
    }

}

/* === Print ===
   Printing has no viewport: the page box stands in for it in width media
   queries, so A4 portrait (~794px) matches the breakpoints above and prints
   the mobile layout, while landscape (~1123px) misses the 980px one and prints
   the desktop layout. Neither was built for paper.

   Keep this block last in the file: it matches the screen rules' specificity
   and wins on source order, not !important. */
@media print {
    .sa-drawer,
    .sa-drawer-backdrop,
    .sa-mobile-header {
        display: none;
    }

    /* A4 portrait matches the mobile breakpoint, which hands the header over to
       .sa-mobile-header — but paper has room for the real one, so put it back
       and print it at the compact scale in both orientations. --sa-header-height
       and the 60px default title are sized for a desktop viewport, not a sheet. */
    .sa-header {
        display: flex;
        height: auto;
        min-height: 100px;
    }

    /* --sa-logo-height has no ceiling; cap rather than set, so a smaller logo
       keeps its own size. */
    .sa-header__logo {
        height: min(var(--sa-logo-height, 160px), 90px);
    }

    /* line-height:1 (base) leaves no leading, so a wrapped headline's rows
       collide — Swedish å/ä/ö diacritics touch the row above and read as one
       mushed row. Normal leading makes wrapped headlines look like normal text. */
    .sa-header__title h1 {
        font-size: 20px;
        line-height: 1.2;
    }

    .sa-header__subtitle {
        line-height: 1.2;
    }

    .sa-header__subtitle--line2 {
        font-size: 15px;
    }

    .sa-header__subtitle--line3 {
        font-size: 13px;
    }

    /* On screen this floats in the gutter beside the centered page; a sheet has
       no gutter, so it lands on the content. */
    .sa-elite-logo {
        display: inline;
        position: static;
    }

    /* The gap the menus reserved for the floating logo is now dead space. */
    .sa--elite .sa-section-tabs__list > :first-child,
    .sa--elite .sa-submenu-bar > :first-child {
        margin-left: 0;
    }

    img {
        max-width: 100%;
    }
}

/* === In-app mode (?showinapp=true) ===
   All chrome (banner, tabs, menus, header, footer) and side columns are
   omitted server-side in MainLayout / the pages; these rules clean up what
   remains so the main content stands alone. Last in the file so they win
   over the base and .sa--elite rules at equal specificity. */
/* Fill the full viewport (= the app's iframe/webview height): the wrapper
   stretches to the viewport as a flex column and the white .sa-layout takes
   whatever the content doesn't. dvh tracks mobile browser UI collapsing;
   vh is the fallback for engines without dvh support. */
.sa--inapp .sa-layout-wrapper {
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.sa--inapp .sa-layout {
    min-height: 0;
    flex: 1;
}

.sa--inapp .sa-layout__content {
    padding: 5px;
}

/* Without the sidebar/ad columns, the main column is the last one — drop its
   column divider so it doesn't render a stray dotted edge. */
.sa--inapp .sa-start-columns__main {
    border-right: none;
    padding-right: 0;
}