/* =====================================================================
   Home Page — ATF (Above the Fold) Critical CSS
   Sections: Ticker + Hero
   This file is render-blocking and must stay small.
   Below-fold sections are in home-btf.css (deferred).
   ===================================================================== */

/* =====================================================================
   Home Page — Top News Ticker  (.tkr-*)
   Container: .tkr-outer (max-width 1180px, padding 0 20px — matches header)
   ===================================================================== */

/* ── CSS Variables ──────────────────────────────────────────────────── */
:root {
  --tkr-h: 42px;
  --tkr-bg: #ffffff;
  --tkr-border: #e5e7eb;
  --tkr-color: #1f2937;
  --tkr-sep: rgba(31, 41, 55, 0.28);
  --tkr-label-bg: #e71d36;
  --tkr-label-color: #ffffff;
}

body.dark-mode {
  --tkr-bg: #000000;
  --tkr-border: rgba(255, 255, 255, 0.07);
  --tkr-color: rgba(255, 255, 255, 0.82);
  --tkr-sep: rgba(255, 255, 255, 0.28);
}

/* ── Bar wrapper ────────────────────────────────────────────────────── */
.tkr-bar {
  background: var(--tkr-bg);
  overflow: hidden;
  position: relative;
  transition: background-color 0.25s ease;
}

/* ── Inner container: 1180px, matches header/footer ────────────────── */
.tkr-outer {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--tkr-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Label badge ────────────────────────────────────────────────────── */
.tkr-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--tkr-label-bg);
  color: var(--tkr-label-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Track wrapper: clip + fade edges ──────────────────────────────── */
.tkr-track-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 97%,
    transparent 100%
  );
}

/* ── Scroll keyframe (items doubled → -50% = one full loop) ─────────── */
@keyframes tkrScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ── Track: inline-flex so it shrinks to content width ─────────────── */
.tkr-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: tkrScroll var(--tkr-speed, 70s) linear infinite;
  will-change: transform;
}

/* Pause on hover + reduced-motion */
.tkr-track-wrap:hover .tkr-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .tkr-track {
    animation-play-state: paused;
  }
}

/* ── Individual ticker item ─────────────────────────────────────────── */
.tkr-item {
  display: inline-flex;
  align-items: center;
}

.tkr-item__link {
  color: var(--tkr-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tkr-item__link:hover {
  color: var(--tkr-label-bg);
}

body.dark-mode .tkr-item__link:hover {
  color: #ff4d6d;
}

/* Bullet separator */
.tkr-sep {
  color: var(--tkr-sep);
  font-size: 11px;
  padding: 0 16px;
  line-height: 1;
  user-select: none;
}

/* ── Social icons: size override for ticker context ─────────────────── */
.tkr-social {
  flex-shrink: 0;
}

.tkr-social .ftr-social {
  --ftr-social-size: 28px;
  --ftr-social-icon: 12px;
  --ftr-social-gap: 6px;
  margin: 0; /* reset footer.css 20px top margin — ticker bar has fixed height */
}

.tkr-social .ftr-social li a {
  border-radius: 5px;
}

/* ── Responsive — Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  .tkr-outer {
    gap: 12px;
  }

  .tkr-sep {
    padding: 0 12px;
  }
}

/* ── Responsive — Mobile (≤767px) ──────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --tkr-h: 38px;
  }

  .tkr-outer {
    gap: 10px;
    padding: 0 12px;
  }

  .tkr-item__link {
    font-size: 12px;
  }

  .tkr-social .ftr-social {
    --ftr-social-size: 24px;
    --ftr-social-icon: 11px;
    --ftr-social-gap: 5px;
  }
}

/* ── Responsive — Small mobile (≤480px): hide social icons ──────────── */
@media (max-width: 480px) {
  .tkr-social {
    display: none;
  }
}

/* =====================================================================
   Home Page — Hero Section
   Naming: .hro-*  (prefix hero)
   Outer:  .hro-outer (max-width 1180px, matches header/footer)
   ===================================================================== */

/* ── CSS Variables ──────────────────────────────────────────────────── */
:root {
  --hro-min-h: 460px;
  --hro-radius: 14px;
  --hro-badge-dot: #22c55e;
  --hro-badge-bg: rgba(34, 197, 94, 0.18);
  --hro-badge-color: #22c55e;
  --hro-sidebar-w: 252px;
  --hro-thumb-size: 56px;
  --hro-avatar-size: 26px;
  --hro-pad-v: 48px;
  --hro-pad-h: 48px;
  --hro-tab-gap: 2px;
  --hro-dot-size: 8px;
  --hro-dot-active: #ffffff;
  --hro-dot-idle: rgba(255, 255, 255, 0.4);
  --hro-bg-dur: 1300ms;
  --hro-bg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hro-content-enter-dur: 720ms;
  --hro-content-exit-dur: 380ms;
  --hro-content-enter-total: 1340ms;
  --hro-content-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hro-content-enter-shift: 18px;
  --hro-content-exit-shift: -10px;
}

/* ── Section: bg syncs with ticker (white light / dark-navy dark) ────── */
.hro-section {
  padding: 15px 0;
  margin: 0;
  background: #ffffff;
  transition: background-color 0.25s ease;
}

body.dark-mode .hro-section {
  background: #000000;
}

/* ── Outer container: 1180px, matches header/footer width ───────────── */
.hro-outer {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.hro-inner {
  position: relative;
  border-radius: var(--hro-radius);
  overflow: hidden;
  min-height: var(--hro-min-h);
  display: flex;
  flex-direction: column;
}

/* ── Background layers: directional slide ───────────────────────────── */
.hro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.hro-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Keyframes for directional BG slide */
@keyframes hrgSlideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hrgSlideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hrgSlideOutLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes hrgSlideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.hro-bg.slide-in-right {
  animation: hrgSlideInRight var(--hro-bg-dur) var(--hro-bg-ease) both;
  z-index: 1;
}
.hro-bg.slide-in-left {
  animation: hrgSlideInLeft var(--hro-bg-dur) var(--hro-bg-ease) both;
  z-index: 1;
}
.hro-bg.slide-out-left {
  animation: hrgSlideOutLeft var(--hro-bg-dur) var(--hro-bg-ease) both;
  z-index: 0;
}
.hro-bg.slide-out-right {
  animation: hrgSlideOutRight var(--hro-bg-dur) var(--hro-bg-ease) both;
  z-index: 0;
}

.hro-bg.is-active {
  z-index: 1;
}

/* ── Overlay: disabled — readability handled by content panels ──────────── */
.hro-overlay {
  display: none;
}

/* ── Content layout ─────────────────────────────────────────────────── */
.hro-layout {
  position: relative;
  z-index: 3;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--hro-pad-v) var(--hro-pad-h);
  min-height: var(--hro-min-h);
}

/* ── Main content (left column) — dark panel tight around text ──────── */
.hro-main {
  flex: 0 0 auto;
  min-width: 0;
  width: min(52%, 540px);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 22px 24px;
}

/* ── Content animations: translateY bottom-up with stagger ─────────── */
@keyframes hroContentEnter {
  from {
    opacity: 0;
    transform: translateY(var(--hro-content-enter-shift));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hroContentExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(var(--hro-content-exit-shift));
  }
}

.hro-main.is-exiting {
  animation: hroContentExit var(--hro-content-exit-dur) var(--hro-content-ease)
    forwards;
  pointer-events: none;
}

.hro-main.is-entering .hro-badge {
  animation: hroContentEnter var(--hro-content-enter-dur)
    var(--hro-content-ease) both 0.06s;
}
.hro-main.is-entering .hro-title {
  animation: hroContentEnter var(--hro-content-enter-dur)
    var(--hro-content-ease) both 0.14s;
}
.hro-main.is-entering .hro-excerpt {
  animation: hroContentEnter var(--hro-content-enter-dur)
    var(--hro-content-ease) both 0.22s;
}
.hro-main.is-entering .hro-meta {
  animation: hroContentEnter var(--hro-content-enter-dur)
    var(--hro-content-ease) both 0.3s;
}

/* ── Category badge ─────────────────────────────────────────────────── */
.hro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  background: var(--hro-badge-bg);
  border-radius: 999px;
  margin-bottom: 12px;
  width: fit-content;
  max-width: 100%;
}

.hro-badge--hidden {
  visibility: hidden;
  pointer-events: none;
}

.hro-badge__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hro-badge-dot);
}

.hro-badge__text {
  color: var(--hro-badge-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hro-badge__text:hover {
  color: #16a34a;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.hro-title {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.65vw, 22px);
  font-weight: 700;
  line-height: 1.22;
  color: #ffffff;
  text-shadow:
    0 1px 6px rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.28);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hro-title__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hro-title__link:hover {
  opacity: 0.88;
  color: inherit;
}

/* ── Excerpt ────────────────────────────────────────────────────────── */
.hro-excerpt {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Meta row — tight horizontal group ──────────────────────────────── */
.hro-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.hro-meta__av-wrap {
  flex-shrink: 0;
  display: block;
  width: var(--hro-avatar-size);
  height: var(--hro-avatar-size);
  border-radius: 999px;
  overflow: hidden;
}

.hro-meta__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}

.hro-meta__author {
  flex-shrink: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
}

.hro-meta__author:hover {
  opacity: 0.8;
  color: #ffffff;
}

.hro-meta__sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.hro-meta__clock {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1;
}

.hro-meta__clock svg {
  display: block;
}

.hro-meta__read {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.hro-meta__share {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.hro-meta__share:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ── Sidebar (right column, desktop only) — ONE shared panel ────────── */
.hro-sidebar {
  flex-shrink: 0;
  width: var(--hro-sidebar-w);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hro-tab-gap);
  align-self: center;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 8px;
}

/* ── Sidebar tab — item inside shared panel ──────────────────────────── */
.hro-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font-family: inherit;
  transition: background-color 0.22s ease;
}

/* Circular thumbnail */
.hro-tab__thumb {
  flex-shrink: 0;
  width: var(--hro-thumb-size);
  height: var(--hro-thumb-size);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.22s ease;
}

.hro-tab__thumb {
  cursor: pointer;
}

.hro-tab__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  transition: transform 0.88s var(--hro-bg-ease);
}

.hro-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hro-tab.is-active {
  background: rgba(255, 255, 255, 0.14);
}

.hro-tab:hover .hro-tab__thumb,
.hro-tab.is-active .hro-tab__thumb {
  border-color: rgba(255, 255, 255, 0.55);
}

.hro-tab:hover .hro-tab__thumb img {
  transform: scale(1.06);
}

/* Tab body */
.hro-tab__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tab title — 2-line clamp + animated underline on active.
   padding-bottom extends the overflow:hidden clip boundary so line 2's
   underline (drawn below the baseline) isn't clipped by the clamping box. */
.hro-tab__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  padding-bottom: 5px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hro-tab:hover .hro-tab__title {
  color: #ffffff;
}

.hro-tab.is-active .hro-tab__title {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* ── Navigation dots (inside card, bottom center) ───────────────────── */
.hro-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  align-items: center;
  gap: 7px;
}

.hro-dot {
  display: block;
  width: var(--hro-dot-size);
  height: var(--hro-dot-size);
  border-radius: 999px;
  background: var(--hro-dot-idle);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    width 0.22s ease;
}

.hro-dot.is-active {
  background: var(--hro-dot-active);
  width: 22px;
}

/* ── Responsive — Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --hro-min-h: 420px;
    --hro-sidebar-w: 220px;
    --hro-pad-h: 32px;
    --hro-pad-v: 40px;
    --hro-thumb-size: 52px;
  }

  .hro-main {
    width: min(54%, 480px);
    padding: 20px 22px;
  }

  .hro-sidebar {
    border-radius: 10px;
    padding: 6px;
  }

  .hro-tab {
    padding: 8px 9px;
  }
}

/* ── Responsive — Mobile (≤767px): carousel mode ───────────────────── */
@media (max-width: 767px) {
  .hro-section {
    margin-bottom: 0;
  }

  .hro-outer {
    padding: 0 12px;
  }

  .hro-inner {
    border-radius: 10px;
    min-height: 360px;
  }

  .hro-layout {
    min-height: 360px;
    padding: 28px 20px 52px;
    gap: 0;
  }

  .hro-sidebar {
    display: none;
  }

  .hro-main {
    width: 100%;
    max-width: none;
    padding: 18px 20px;
    border-radius: 10px;
  }

  .hro-dots {
    display: flex;
  }

  .hro-title {
    font-size: clamp(19px, 5vw, 24px);
    -webkit-line-clamp: 4;
    margin-bottom: 8px;
  }

  .hro-excerpt {
    display: none;
  }

  .hro-badge {
    margin-bottom: 10px;
  }

  .hro-meta {
    gap: 6px;
  }

  .hro-meta__author {
    font-size: 12px;
  }

  .hro-meta__read {
    font-size: 11px;
  }
}

/* ── Responsive — Small mobile (≤480px) ────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --hro-avatar-size: 26px;
  }

  .hro-inner {
    min-height: 320px;
  }

  .hro-layout {
    min-height: 320px;
    padding: 24px 16px 48px;
  }

  .hro-main {
    padding: 16px 18px;
    border-radius: 8px;
  }

  .hro-meta__share {
    width: 28px;
    height: 28px;
  }
}