/* "New Updates" carousel — Stage J rewrite (PUBLIC_UI_DESIGN.md §5).
   Paper band, gold-bar section heading, 16:9 media geometry (same guarantee
   as the hero), Fjalla gold caption over the brand veil. */

.update {
  margin: auto;
  background: var(--sj-paper);
  padding: var(--sj-sec-pad) 0;
}

.update-text h3 {
  font-family: var(--sj-font-head);
  font-weight: 400;
  text-align: center;
  font-size: clamp(30px, 4vw, 54px);
  color: var(--sj-navy-dark);
  margin: 0 0 8px;
}
.update-text h3::after {
  content: ""; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--sj-gold); margin: 14px auto 36px;
}

.update-carousel {
  box-sizing: border-box;
  width: min(1200px, 92%);
  margin: auto;
  border-radius: var(--sj-r-card);
  overflow: hidden;
  box-shadow: var(--sj-shadow-2);
}

.update-carousel-item { position: relative; }
.update-carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sj-veil);
  z-index: 1;
}
.update-carousel-item img {
  display: block;
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}
@media (min-width: 901px) {
  .update-carousel-item img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .update-carousel-item img { height: 420px; }
}

.update-carousel .carousel-indicators [data-bs-target] {
  width: 26px; height: 4px; border-radius: 2px;
  background: #fff; opacity: .45; border: 0;
}
.update-carousel .carousel-indicators .active { background: var(--sj-gold); opacity: 1; }

.update-carousel-caption { top: 30%; bottom: auto; }
.update-carousel-caption h4 {
  font-family: var(--sj-font-head);
  font-weight: 400;
  color: var(--sj-gold);
  font-size: clamp(30px, 4.5vw, 60px);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.update-carousel-caption p {
  font-family: var(--sj-font-body);
  font-size: clamp(13px, 1.4vw, 18px);
  color: rgba(255, 255, 255, .92);
  margin: 10px 0 0;
}

.update-slider-btn { display: inline-block; margin-top: 20px; text-decoration: none; }
.update-slider-btn .btn {
  font-family: var(--sj-font-body);
  font-size: 15px; font-weight: 600;
  color: var(--sj-navy-dark);
  background: var(--sj-gold);
  border: 0;
  border-radius: var(--sj-r-btn);
  padding: 12px 26px;
  transition: background var(--sj-t-fast) ease, transform var(--sj-t-fast) ease;
}
.update-slider-btn .btn:hover {
  color: var(--sj-navy-dark);
  background: #f2cc00;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .update-carousel-caption { top: 22%; }
  .update-slider-btn { margin-top: 12px; }
  .update-slider-btn .btn { padding: 9px 18px; font-size: 13px; }
}

/* ===== K13 mobile — phone tier; the 420px box stays for 769–900 and the
   16:9 box ≥901 is untouched. Appended LAST on purpose: the ≤600 caption/btn
   rules above and the 420px height tie on specificity and lose by order. */
@media (max-width: 768px) {
  .update-carousel-item img { height: min(380px, 56vh); height: min(380px, 56svh); }
  .update-carousel-caption { top: 50%; transform: translateY(-50%); bottom: auto; left: 8%; right: 8%; }
  .update-carousel-caption h4 { font-size: clamp(24px, 6.5vw, 34px); }
  .update-carousel-caption p { font-size: 13px; }
  .update-text h3 { font-size: clamp(24px, 4.5vw, 30px); }
  .update-slider-btn .btn { padding: 12px 20px; font-size: 13.5px; } /* ≥44px target */
  /* 32px-tall indicator tap areas — background-clip re-declared because the
     base rule's background: shorthand resets it (same trap as the hero). */
  .update-carousel .carousel-indicators [data-bs-target] {
    border: 0; border-block: 14px solid transparent;
    background-clip: padding-box; margin-left: 5px; margin-right: 5px;
  }
}