/* front-page-styles.css - Front page and section page specific CSS */
/* Note: Common styles are in common.css */
/* Note: .scroll-pane, .event-tv, .event-time are in common.css */

.scroll-pane-donor-board { max-height: 250px; }
.scroll-pane-updates {
  max-height: 415px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Section pages (2nd column): taller widgets so more visible without scrolling */
.desktop-updates-widget.section-tall .scroll-pane-updates {
  max-height: 830px;
}
/* Board: container has fixed height (429px), so override for section-tall so scroll area can be ~2x */
#board-tabs-container.section-tall {
  height: 762px;
}
.board-tabs-container.section-tall .scroll-pane-board {
  max-height: 666px;
}

/* Section page WITH videos: keep updates and board smaller so right column does not exceed first column */
.desktop-updates-widget.section-tall.section-with-videos .scroll-pane-updates {
  max-height: 360px;
}
#board-tabs-container.section-tall.section-with-videos {
  height: 340px;
}
.board-tabs-container.section-tall.section-with-videos .scroll-pane-board {
  max-height: 244px;
}

/* Section page with no video player: board extends to bottom of column */
#right_column #board-tabs-container.section-board-fill {
  flex: 1 1 0;
  min-height: 429px;
  height: auto;
}
.board-tabs-container.section-board-fill .scroll-pane-board {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.scroll-pane-recruit-updates { max-height: 200px; }
.gsc-branding, .gcsc-branding {
    display: none !important;
}
.photo-credit { font-size:.7em; }
#calendar-footer {
  border-radius: 0;
  padding: 3px;
  padding-bottom: 5px;
  text-align: center;
  background-color: var(--site-sections-2);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(0, 0, 0, 0.14) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  filter: none;
  margin-bottom: 0;
}
#calendar-footer a { color:var(--color-text-on-secondary); font-size:12px; }
#calendar-list { padding: 2px; }
#calendar-list li:last-child { border:none; }
#m-other a { font-size:13px; }

#recent-stories-block, #recent-stories-block-footer, .colorSections2 { background-color: var(--site-sections-2); background-image:none; }
/* Note: .front_section, .section_header base styles are in common.css */
.header { text-transform: uppercase; }
#search-c input { width:277px !important; }
#left_column, #right_column, #layout_right { float:none; vertical-align: top; display:inline-block;}
.section_body, .section_body li, .front_section p { font-family: Tahoma; font-size:14px;}
ul li a:visited { color: var(--site-primary); }

/* =====================================================
   MODERN RESPONSIVE FLEXBOX LAYOUT
   ===================================================== */

/* Override common.css box-sizing reset for legacy layout compatibility */
#wrapper_front,
#wrapper_front * {
  box-sizing: content-box;
}

/* 1280px = content width; padding outside (content-box) */
#wrapper_front {
  box-sizing: content-box;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 15px 12px;
  background: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  white-space: normal;
  align-items: stretch;
  border-top:inherit !important;
}

/* Shared column styles */
#left_column,
#right_column,
#layout_right {
  min-width: 0;
  margin: 0 !important;
  background: var(--color-bg-column);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary);
}

/* Main content column - takes remaining space after sidebars */
#left_column {
  flex: 1 1 0;
  padding: 12px;
  font-size: 14px;
  white-space: normal;
}

/* Middle column - slightly wider for better content fit */
#right_column {
  flex: 0 0 335px;
  padding: 12px;
  font-size: 14px;
  white-space: normal;
}

/* Ensure all column 2 children are full width and centered */
#right_column > * {
  width: 100%;
  box-sizing: border-box;
}

#right_column > div {
  margin-left: auto;
  margin-right: auto;
}


/* Override JW Player's hardcoded 380px (set in front-page-footer.jspf) so playlist fits column */
#right_column #videoContainer_jwplayer_playlistcomponent {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* #board-tabs-container uses shared .widget-container */
#board-tabs-container,
#mobile_board-tabs-container {
  height: 429px;
  display: flex;
  flex-direction: column;
}
/* Board widget specific - ensure it fills column width */
#board-tabs-container,
#mobile_board-tabs-container,
#board-tabs,
#mobile_board-tabs,
#board-tabs .ui-tabs-panel,
#mobile_board-tabs .ui-tabs-panel,
#board-messages,
#mobile_board-messages,
#mobile_board-messages-premium {
  width: 100% !important;
  box-sizing: border-box;
}

/* Flexbox layout for board tabs to properly contain scroll area and footer */
#board-tabs,
#mobile_board-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Allow flex children to shrink */
}
/* Active tab panel gets flex layout - don't override jQuery UI's display:none for inactive tabs */
#board-tabs .ui-tabs-panel[aria-hidden="false"],
#mobile_board-tabs .ui-tabs-panel[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#board-messages,
#mobile_board-messages,
#mobile_board-messages-premium {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
}

#board-tabs .ui-tabs-nav,
#mobile_board-tabs .ui-tabs-nav {
  width: 98%;
}

/* Widget spacing via flexbox gap - replaces manual spacer divs */
#right_column,
#layout_right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Reset widget margins so gap provides consistent spacing */
#right_column > *,
#layout_right > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Legacy spacer support for pages not yet updated */
#right_column .spacer,
#layout_right .spacer {
  display: none; /* Hide spacers - gap handles spacing now */
}

/* Ad spacing - smaller gap (10px) around ad elements */
/* Apply .ad-spacing class to any ad that needs tighter spacing */
/* Using !important to override inline styles on ads */
#right_column .ad-spacing,
#layout_right .ad-spacing,
#right_column .col2-fanatics-ad,
#layout_right .col2-fanatics-ad {
  margin-top: -10px !important;  /* Reduces 20px gap to 10px above */
  margin-bottom: -10px !important; /* Reduces 20px gap to 10px below */
}

/* Fanatics Ad - Prevent layout shift with reserved height (68px = 50px image + dark mode padding/border) */
.col2-fanatics-ad {
  min-height: 68px; /* Reserve space so dark mode (padding 8px + border 1px) doesn't cause layout shift */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.col2-fanatics-ad img {
  width: auto;
  max-width: 300px;
  height: 50px; /* Fixed height so image never causes CLS */
  object-fit: contain;
}

/* Right sidebar - uses shared #layout_right from common.css */
/* Front page specific: narrower width for 3-column layout */
#layout_right { 
  flex: 0 0 300px;
  padding: 12px;
  position: relative; /* Contain sticky ad within this column */
}

/* =====================================================
   STICKY SIDEBAR AD - Contained within #layout_right
   Prevents ad from breaking out of column and overlapping footer
   ===================================================== */
#front-sidebar-sticky-ad {
  position: -webkit-sticky;
  position: sticky;
  top: 70px; /* Below fixed header */
  max-width: 300px;
  width: 100%;
  z-index: 10;
  /* Ensure ad content doesn't overflow */
  overflow: hidden;
}

/* Override any fixed positioning that ad scripts might inject */
#front-sidebar-sticky-ad > div,
#front-sidebar-sticky-ad > iframe,
#front-sidebar-sticky-ad [id*="google_ads"],
#front-sidebar-sticky-ad [id*="div-gpt"] {
  position: relative !important;
  max-width: 100% !important;
}

/* Fix feature story small layout to stay within container */
.feature_story_small {
  max-width: 100%;
  width: 49% !important;
  box-sizing: border-box;
}

/* Tablet-only ad in Column 2 - hidden on desktop */
.col2-tablet-ad {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ensure all images are constrained to their containers */
.feature_story img, .feature_story_small img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto;
}

.front_section, .section-header-footer .header, .header, .section-header, #search-c {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

.recruit-quick-search-container {
  padding:0 0 10px 0 !important;
}

/* More News link styling */
.more-headlines {
  background: transparent !important;
  padding: 5px !important;
  margin: 0 !important;
  text-align: center !important;
}

.more-headlines a,
.more-headlines a:visited,
.more-headlines a:hover,
.more-headlines a:active {
  display: inline-block;
  background: var(--site-secondary);
  color: var(--color-text-on-secondary) !important;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.more-headlines a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Small stories (text links) card - header bar + list + More News button */
.small-stories-card {
  background: var(--color-bg-card, #fafafa);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
  margin-top: 12px;
  overflow: hidden;
}
.small-stories-card__header {
  background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%);
  color: var(--color-text-on-primary, #fff);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.small-stories-card__body {
  padding: 12px 0;
}
.small-stories-card #smallStories {
  margin-bottom: 4px;
}
.small-stories-card #smallStories ul.small-stories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.small-stories-card #smallStories ul.small-stories-list li {
  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
  line-height: 1.35;
}
.small-stories-card #smallStories ul.small-stories-list li:last-child {
  border-bottom: none;
}
/* Single source of padding on link; whole row clickable; orb inside link */
.small-stories-card #smallStories ul.small-stories-list li a {
  display: block;
  padding: 8px 0 8px 33px;
  position: relative;
  border-left: 3px solid transparent;
  transition: background-color 0.18s ease, border-left-color 0.18s ease, color 0.18s ease;
  font-size: 14px;
}
/* Bullet on link (same style as forum-orb forum-orb--unread) - keeps orb and text on one line */
.small-stories-card #smallStories ul.small-stories-list li a::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--site-primary, #522d80);
  background: radial-gradient(
    circle at 30% 30%,
    var(--site-primary-light, #6b3d99) 0%,
    var(--site-primary, #522d80) 50%,
    var(--site-primary-dark, #3d2160) 100%
  );
  box-shadow:
    0 1px 2px var(--shadow-color-heavy, rgba(0, 0, 0, 0.25)),
    inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}
/* Link color: site secondary; hover matches updates widget (site-primary bg, site-secondary left border, white text) */
.small-stories-card #smallStories a,
.small-stories-card #smallStories a:visited {
  color: var(--site-secondary);
  text-decoration: none;
}
.small-stories-card #smallStories a:hover,
.small-stories-card #smallStories a:focus {
  background-color: var(--site-primary);
  border-left-color: var(--site-secondary);
  color: var(--color-text-on-primary);
  text-decoration: none;
}

/* 1051-1150px: Column 2 shrinks from 335px to 295px, Column 1 stays flexible */
@media (min-width: 1051px) and (max-width: 1150px) {
  #wrapper_front {
    padding: 12px;
    gap: 10px;
  }
  
  #left_column {
    flex: 1 1 0;
    min-width: 0;
  }
  
  /* Column 2 shrinks from 335px at 1150px to 295px at 1051px */
  #right_column {
    flex: 0 0 calc(295px + (100vw - 1051px) * 40 / 99);
    min-width: 295px;
    max-width: 335px;
  }
  
  /* Column 3 stays fixed */
  #layout_right {
    flex: 0 0 300px;
    min-width: 300px;
  }
}

/* iPad Pro 12.9" portrait (1024px): All 3 columns stay visible, slightly narrower */
@media (min-width: 1001px) and (max-width: 1050px) {
  #wrapper_front {
    padding: 10px;
    gap: 10px;
  }
  
  #left_column {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    padding: 5px;
    padding-bottom: 20px !important;
    margin-top: 0;
    order: 1;
  }
  
  /* Column 2 - slightly narrower */
  #right_column {
    flex: 0 0 295px;
    min-width: 0;
    border-radius: 10px;
    padding: 0;
    margin-top: 0;
    order: 2;
  }
  
  /* Column 3 - min 300px for ads */
  #layout_right {
    flex: 0 0 300px;
    min-width: 300px;
    border-radius: 10px;
    padding: 0;
    margin-top: 0;
    order: 3;
  }

  /* Ensure 2 stories per row - account for gap */
  .feature_story_small {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
  
  .desktop-small-stories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Tablet/iPad Portrait: Column 2 stays alongside Column 1, Column 3 drops below */
@media (max-width: 1000px) {
  #wrapper_front {
    padding: 12px;
    gap: 12px;
  }
  
  /* Column 1 takes remaining space */
  #left_column {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    padding: 5px;
    padding-bottom: 20px !important;
    margin-top: 0;
    order: 1;
  }
  
  /* Column 2 stays alongside Column 1 - min 300px for ad */
  #right_column {
    flex: 0 0 300px;
    min-width: 300px;
    border-radius: 10px;
    padding: 12px;
    margin-top: 0;
    order: 2;
    /* Enable flexbox for reordering children */
    display: flex;
    flex-direction: column;
  }
  
  /* Column 3 drops to full width below */
  #layout_right {
    flex: 1 1 100%;
    min-width: 0;
    border-radius: 10px;
    padding: 0;
    margin-top: 0;
    order: 3;
  }
  
  /* Reorder Column 2 children */
  #right_column .desktop-updates-widget { order: 2; }
  #right_column #board-tabs-container { order: 3; }
  #right_column > * { order: 10; } /* Everything else after */

  .feature_story_small {
    width: 49.5% !important;
  }
}

/* iPad Portrait ONLY (641px-1000px): Show tablet ad in Column 2, hide Column 3 ad */
@media (max-width: 1000px) and (min-width: 641px) {
  /* Show tablet ad at top of Column 2, hide Fanatics ad */
  #right_column .col2-tablet-ad { 
    display: block !important; 
    height: auto !important;
    overflow: visible !important;
    order: 1; 
  }
  #right_column .col2-fanatics-ad { display: none !important; }
  
  /* Hide Column 3's desktop ad (now showing in Column 2) */
  .col3-desktop-ad { display: none !important; }
}

/* Tight tablet: Single-column thumbnails when sidebar takes too much space */
@media (max-width: 850px) and (min-width: 641px) {
  #left_column { order: 1 !important; }
  #right_column { order: 2 !important; }
  #layout_right { order: 3 !important; }
  
  .feature_story_small {
    width: 100% !important;
    padding-bottom: 40% !important;
  }
}

/* Mobile: All columns stack (640px catches S21/Android with display scaling) */
@media (max-width: 640px) {
  #wrapper_front, #wrapper_front * {
    box-sizing: border-box !important;
  }

  #wrapper_front {
    padding: 0 5px 5px;
  }

  #left_column, #right_column, #layout_right {
    padding: 0;
  }
  
  #left_column {
    flex: 1 1 100% !important;
    min-width: 0;
    order: 1 !important;
    /* Make left_column a flex container to reorder its children */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Reorder elements within left_column: mobile content first, then commits, then section Top Updates */
  #left_column .desktop-headlines { order: 10; }
  #left_column .desktop-small-stories { order: 11; }
  #left_column #mobile-combined-content { order: 1 !important; }
  #left_column #commit-tabs { order: 2 !important; }
  #left_column #recruit-search-widget { order: 3 !important; }
  /* Section page "Top Updates of the Week": give order so it appears after mobile content (was default 0 = first) */
  #left_column > .updates-widget-container { order: 4; }
  /* Hide section-page spacer on mobile so it doesn't create a 30px blank gap at the top */
  #left_column > .section-updates-spacer { display: none; }
  
  #right_column {
    flex: 1 1 100% !important;
    min-width: 0;
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  #layout_right {
    flex: 1 1 100% !important;
    min-width: 0;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* Ensure all widgets have consistent margin reset for gap-based spacing */
  #right_column > *,
  #layout_right > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* All widget containers should follow the same spacing rules */
  #right_column .widget-container,
  #layout_right .widget-container,
  #right_column .updates-widget-container,
  #layout_right .updates-widget-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Right-column items: fill available width ── */
  /* Direct children (widget containers, ads, etc.) fill the full column width */
  #right_column > *,
  #layout_right > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Section page, left column only: expand "Top Updates" so all items show without inner scroll.
     Right / layout columns keep inline heights (sister-site top news, best-updates, rail widgets). */
  #left_column .scroll-pane-updates {
    height: auto !important;
    max-height: none !important;
  }

  /* Gallery: remove fixed max-height so all albums display without inner scrolling */
  #right_column .gallery-content,
  #layout_right .gallery-content {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Fanatics ad: fill container width on mobile */
  .col2-fanatics-ad {
    width: 100% !important;
    justify-content: center;
  }
}

/* =====================================================
   DARK MODE STYLES
   Column backgrounds handled by canonical definition in dark-mode.css
   ===================================================== */
html.dark-mode .front_section {
  background-color: var(--dm-bg-card);
}

html.dark-mode .small-stories-card {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}
html.dark-mode .small-stories-card__header {
  background: var(--dm-premium-bg) !important;
  color: var(--color-text-on-primary, #fff);
}
html.dark-mode .small-stories-card #smallStories ul.small-stories-list li {
  border-bottom-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}
/* More Headlines link text: match Updates widget (dm-text-link), not purple/site-secondary */
html.dark-mode .small-stories-card #smallStories a,
html.dark-mode .small-stories-card #smallStories a:visited {
  color: var(--dm-text-link) !important;
}
html.dark-mode .small-stories-card #smallStories a:hover,
html.dark-mode .small-stories-card #smallStories a:focus {
  background: var(--dm-card-hover-bg) !important;
  border-left-color: var(--site-primary) !important;
  color: var(--color-text-on-primary) !important;
}

/* Mobile More Headlines: same link text as Updates widget in dark mode */
html.dark-mode .mobile-more-headlines-list li a,
html.dark-mode .mobile-more-headlines-list li a:visited {
  color: var(--dm-text-link) !important;
}
html.dark-mode .mobile-more-headlines-list li a:hover,
html.dark-mode .mobile-more-headlines-list li a:focus {
  background: var(--dm-card-hover-bg) !important;
  border-left-color: var(--site-primary) !important;
  color: var(--color-text-on-primary) !important;
}

/* Mobile More Headlines card: dark background and borders so text is readable in dark mode */
html.dark-mode .mobile-more-headlines-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
  box-shadow: none;
}
html.dark-mode .mobile-more-headlines-card__header {
  background: var(--dm-premium-bg) !important;
}
html.dark-mode .mobile-more-headlines-card__body {
  background: var(--dm-bg-card);
}
html.dark-mode .mobile-more-headlines-list li {
  border-bottom-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}

html.dark-mode .section_header {
  background-color: var(--dm-section-header, var(--site-secondary));
}

/* Fanatics ad: dark wrapper so ad block fits theme (image may stay light). Fixed height prevents layout shift when dark mode applies. */
html.dark-mode .col2-fanatics-ad {
  height: 68px; /* 50px content + 8px padding top/bottom + 1px border top/bottom */
  min-height: 68px;
  box-sizing: border-box;
  background: var(--dm-bg-card);
  border: 1px solid var(--dm-border);
  border-radius: 8px;
  padding: 8px;
}

html.dark-mode .col2-fanatics-ad img {
  border-radius: 4px;
}

html.dark-mode a:hover {
  color: var(--site-primary);
}

/* Visible keyboard focus for links (accessibility) */
html.dark-mode #wrapper_front a:focus,
html.dark-mode #main_layout_wrapper a:focus {
  outline: 2px solid var(--site-primary);
  outline-offset: 2px;
}

html.dark-mode #wrapper_front a:focus:not(:focus-visible),
html.dark-mode #main_layout_wrapper a:focus:not(:focus-visible) {
  outline: none;
}

html.dark-mode #wrapper_front a:focus-visible,
html.dark-mode #main_layout_wrapper a:focus-visible {
  outline: 2px solid var(--site-primary);
  outline-offset: 2px;
}

/* Ensure updates widget list items wrap text and don't get cut off */
.scroll-pane-updates,
.scroll-pane-updates ul,
.scroll-pane-updates ul li,
.scroll-pane-updates ul li a {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.front_section {
  background-color: inherit !important;
}

.section-header {
  border-radius: inherit !important;
}

/* =====================================================
   MOBILE COMBINED CONTENT (640px breakpoint)
   Combines stories and updates into single priority-ordered feed
   ===================================================== */
/* Note: ArticleFont @font-face is in news-headlines.css */

/* Hide mobile combined content on desktop by default */
#mobile-combined-content {
  display: none;
}

/* Hide mobile board widget on desktop - only shown on mobile */
#mobile-board-widget {
  display: none;
}

/* Hide mobile follow widget on desktop - only shown on mobile */
#mobile-follow-widget {
  display: none;
}

/* Hide mobile POTD widget on desktop - only shown on mobile */
#mobile-potd-widget {
  display: none;
}

/* Hide mobile schedule widget on desktop - only shown on mobile (between More News and POTD) */
#mobile-schedule-widget {
  display: none;
}

/* Mobile combined content layout styles */
#mobile-combined-content .feature_story {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 52.4%;
  height: 0;
  overflow: hidden;
  background-color: #000;
  border-radius: 8px;
}

#mobile-combined-content .feature_story a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
  color: #fff;
}

#mobile-combined-content .feature_story img,
#mobile-combined-content .feature_story .headline-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

#mobile-combined-content .headline-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 15px 15px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  color: #fff;
  font-size: 1.375rem;
  font-family: ArticleFont, serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
  line-height: 1.1;
  z-index: 9;
}

#mobile-combined-content .headline-title span {
  display: block;
}

#mobile-combined-content .news-thumb-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--site-primary);
  color: var(--color-text-on-primary) !important;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 0.75em;
  padding: 4px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

#mobile-combined-content .time-label {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.7em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  #front-top-sidebar-ad,
  #front-sidebar-sticky-ad,
  #sidebar-sticky {
    display: none !important;
  }

  /* Hide desktop headlines and updates widget on mobile */
  .desktop-headlines,
  .desktop-small-stories,
  .desktop-updates-widget {
    display: none !important;
  }
  
  /* Show mobile combined content on mobile */
  #mobile-combined-content {
    display: block !important;
    padding: 0;
  }
  
  /* First item in mobile combined never dims when read */
  #mobile-combined-content > *:first-child {
    opacity: 1 !important;
  }

  /* Big thumbnail stories in mobile combined - all direct children are full width */
  #mobile-combined-content > .feature_story {
    width: 100% !important;
    padding-bottom: 52.4%;
    border-bottom: 3px solid var(--site-primary);
    margin-bottom: 6px;
  }

  /* Top accent border only on the very first story */
  #mobile-combined-content > .feature_story:first-child {
    border-top: 3px solid var(--site-primary);
  }
  
  /* Grid container for 2-per-row items */
  #mobile-combined-content .mobile-combined-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
  }
  
  /* All items in grid are half width (2 per row) */
  /* Using ~3:2 aspect ratio (padding-bottom 32%) for better image display */
  #mobile-combined-content .mobile-combined-grid .feature_story {
    width: 48.5% !important;
    padding-bottom: 32% !important;
    margin-bottom: 4px;
    border-top: 2px solid var(--site-primary);
    border-bottom: 2px solid var(--site-primary);
    border-radius: 6px;
  }
  
  /* Headline title adjustments for smaller cards - enough left/right padding so titles don't get clipped */
  #mobile-combined-content .mobile-combined-grid .headline-title {
    font-size: 0.95rem;
    padding: 18px 8px 8px;
    line-height: 1.2;
  }

  /* Clamp grid card titles to 3 lines with ellipsis */
  #mobile-combined-content .mobile-combined-grid .headline-title span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* On smaller story cards only: hide trending/breaking icon and time chip (keep on big story) */
  #mobile-combined-content .mobile-combined-grid .feature_story .news-thumb-label,
  #mobile-combined-content .mobile-combined-grid .feature_story .time-label {
    display: none !important;
  }
  
  /* Show mobile board widget injected between stories */
  #mobile-board-widget {
    display: block !important;
    margin: 15px 0;
    padding: 0;
  }
  
  /* Ensure board widget fills mobile width properly (prefixed ID version) */
  #mobile-board-widget #mobile_board-tabs-container {
    width: 100% !important;
    margin: 0 !important;
    height: 429px !important;
  }
  
  /* Mobile board widget - inherits all styles from board-widget.jspf classes */
  /* Only mobile-specific overrides needed here */
  #mobile-board-widget .board-messages {
    height: 350px !important;
    max-height: 350px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  
  /* Fix tab vertical centering on mobile */
  #mobile-board-widget .board-tabs .ui-tabs-nav {
    height: 40px !important;
  }
  
  #mobile-board-widget .board-tabs .ui-tabs-nav li {
    display: flex !important;
    align-items: stretch !important;
  }
  
  #mobile-board-widget .board-tabs .ui-tabs-nav li a {
    height: auto !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
  }
  
  /* FOLLOW WIDGET - Repositioned for mobile (after 9th story) */
  #mobile-follow-widget {
    display: block !important;
    margin: 15px 0;
    padding: 0;
  }
  
  /* Make the button full width on mobile */
  #mobile-follow-widget .cta-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  /* Mobile More Headlines card - combined story + update text links */
  .mobile-more-headlines-card {
    background: var(--color-bg-card, #fafafa);
    border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    margin: 12px 0;
    overflow: hidden;
  }
  .mobile-more-headlines-card__header {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%);
    color: var(--color-text-on-primary, #fff);
    padding: 8px 16px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .mobile-more-headlines-card__body {
    padding: 12px 16px 16px 0;
  }
  .mobile-more-headlines-list {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
  }
  .mobile-more-headlines-list li {
    border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    padding: 0;
  }
  .mobile-more-headlines-list li:last-child {
    border-bottom: none;
  }
  .mobile-more-headlines-list li a {
    display: block;
    padding: 10px 0 10px 33px;
    border-left: 3px solid transparent;
    color: var(--site-secondary);
    text-decoration: none;
    line-height: 1.35;
    position: relative;
    transition: background-color 0.18s ease, border-left-color 0.18s ease, color 0.18s ease;
  }
  .mobile-more-headlines-list li a::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--site-primary, #522d80);
    background: radial-gradient(
      circle at 30% 30%,
      var(--site-primary-light, #6b3d99) 0%,
      var(--site-primary, #522d80) 50%,
      var(--site-primary-dark, #3d2160) 100%
    );
    box-shadow: 0 1px 2px var(--shadow-color-heavy, rgba(0, 0, 0, 0.25));
  }
  .mobile-more-headlines-list li a:hover,
  .mobile-more-headlines-list li a:focus {
    background-color: var(--site-primary);
    border-left-color: var(--site-secondary);
    color: var(--color-text-on-primary);
  }
  
  /* Hide the original follow widget in the right rail on mobile */
  #layout_right #follow-widget {
    display: none !important;
  }
  
  /* Hide the board widget in column 2 on mobile (we show it inline now) */
  #right_column #board-tabs-container {
    display: none !important;
  }
  
  /* SCHEDULE WIDGET - Between More News and POTD on mobile (desktop shows in column 3) */
  #mobile-schedule-widget {
    display: block !important;
    margin: 15px 0;
    padding: 0;
  }
  
  /* Hide the schedule in column 3 on mobile (we show it in mobile-combined-content instead) */
  #layout_right .calendar-widget-container {
    display: none !important;
  }
  
  /* POTD WIDGET - Repositioned for mobile (after More News) */
  #mobile-potd-widget {
    display: block !important;
    margin: 15px 0 0 0;
    padding: 0;
  }
  
  /* Hide the original POTD widget in column 2 on mobile */
  #right_column #potd-widget {
    display: none !important;
  }
}

/* =====================================================
   SHARED WIDGET STYLES
   Note: The following widget styles are now in common.css:
   - Material Icons
   - POTD Widget (self-contained in potd-widget.jspf)
   - Donors Den Widget
   - Gallery Widget
   - Widget Header Icon Styling
   - Widget Dividers
   - Season Results Widget
   ===================================================== */