/*
 * home.css — Homepage-specific styles
 * Extracted from resources/views/home.latte
 */

/* ── Stats counter strip ─────────────────────────────────────────── */
/* Keep this padding and .stat-item's in step — they stack, so 2.5rem here plus
   1.5rem there put 81px of dead space between the hero and the first digit and
   pushed the strip's bottom border off a 910px-tall screen. */
.stats-strip {
  background:     var(--surface);
  border-top:     1px solid var(--border);
  border-bottom:  1px solid var(--border);
  padding:        1.25rem 0;
}
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-item {
  text-align: center;
  padding:    1.25rem 1rem;   /* also sets the divider length between stats */
  border-right: 1px solid var(--border);
  position: relative;
}
.stat-item:last-child { border-right: none; }
@media (max-width: 640px) {
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--border); }
  .stat-item { border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-bottom: none; }
}
.stat-number {
  font-family:   var(--font-serif);
  font-size:     2.2rem;
  font-weight:   700;
  color:         var(--foreground);
  line-height:   1;
  margin-bottom: 0.35rem;
}
.stat-number span {
  /* Bright accent gold — these are large (35px) decorative symbols (K, +, .)
     so the large-text 3:1 bar applies, not 4.5:1. See --gold-accent. */
  color: var(--gold-accent);
}
.stat-label {
  font-size:      0.72rem;
  color:          var(--muted-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight:    500;
}

/* ── Services section ───────────────────────────────────────────── */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
}
@media (max-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-tile {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       1.5rem 1.25rem;
  text-decoration: none;
  display:       flex;
  flex-direction: column;
  gap:           0.6rem;
  position:      relative;
  overflow:      hidden;
  transition:    transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.service-tile::before {
  content:          '';
  position:         absolute;
  top:              0; left: 0; right: 0;
  height:           3px;
  background:       var(--gold);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.28s ease;
}
.service-tile:hover {
  transform:    translateY(-3px);
  box-shadow:   0 10px 30px rgba(0,0,0,0.08);
  border-color: var(--border-mid);
}
.service-tile:hover::before { transform: scaleX(1); }

.service-tile__icon {
  width:           40px;
  height:          40px;
  border-radius:   9px;
  background:      var(--gold-dim);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
  flex-shrink:     0;
  margin-bottom:   0.25rem;
}
.service-tile__title {
  font-family: var(--font-serif);
  font-size:   1rem;
  font-weight: 600;
  color:       var(--foreground);
  margin:      0;
}
.service-tile__desc {
  font-size:   0.78rem;
  line-height: 1.6;
  color:       var(--muted-text);
  flex:        1;
}
.service-tile__link {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--teal);
  margin-top:  0.25rem;
}

/* ── Mission / Vision callout ───────────────────────────────────── */
.visi-misi-wrap {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
}
@media (max-width: 640px) {
  .visi-misi-wrap { grid-template-columns: 1fr; }
}
.vm-card {
  border-radius: 10px;
  padding:       2rem 1.75rem;
  border:        1px solid var(--border);
  position:      relative;
  overflow:      hidden;
}
.vm-card--visi  { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); }
.vm-card--misi  { background: var(--cyan-dim);  border-color: rgba(14,159,193,0.2); }
.vm-card__label {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  0.6rem;
}
.vm-card--visi .vm-card__label { color: var(--gold); }
.vm-card--misi .vm-card__label { color: var(--cyan); }
.vm-card__text {
  font-family: var(--font-serif);
  font-size:   1.05rem;
  font-weight: 600;
  line-height: 1.55;
  color:       var(--foreground);
}

/* ── Quick-links / highlights strip ────────────────────────────── */
.highlights-strip {
  background:   var(--foreground);
  padding:      3rem 0;
  overflow:     hidden;
}
.highlight-item {
  text-align: center;
  color:      #fff;
  padding:    0 1rem;
}
.highlight-item__title {
  font-family:   var(--font-serif);
  font-size:     1.05rem;
  font-weight:   600;
  margin-bottom: 0.35rem;
}
.highlight-item__sub {
  font-size: 0.73rem;
  opacity:   0.55;
}
.highlights-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
  align-items:           center;
}
@media (max-width: 768px) {
  .highlights-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
}

/* ── Section label + heading pattern ───────────────────────────── */
.section-label {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --gold is 1.55:1 on the cream section background. site.css already sets
     --gold-ink here; this override was quietly undoing it. */
  color:          var(--gold-ink);
  margin-bottom:  0.4rem;
}
.section-heading {
  font-family: var(--font-serif);
  font-size:   1.85rem;
  font-weight: 600;
  color:       var(--foreground);
  line-height: 1.25;
  margin-bottom: 0.65rem;
}
@media (max-width: 640px) { .section-heading { font-size: 1.45rem; } }
.section-sub {
  font-size:   0.85rem;
  line-height: 1.7;
  color:       var(--muted-text);
  max-width:   520px;
}

/* ── Announcement skeleton ───────────────────────────────────────── */
.ann-skel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) { .ann-skel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ann-skel { grid-template-columns: 1fr; } }

.ann-skel__card {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ann-skel__img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0;
}

.ann-skel__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ann-skel__line         { border-radius: 4px; }
.ann-skel__line--meta   { height: 0.6rem;  width: 42%; }
.ann-skel__line--title  { height: 0.85rem; width: 100%; }
.ann-skel__line--link   { height: 0.6rem;  width: 28%; margin-top: 0.3rem; }

/* ── Announcement slider ────────────────────────────────────────── */
#announcementSlider > div {
  display: flex;
  gap: 1.25rem;
}

#announcementSlider .announcement-card {
  flex: 0 0 min(calc(100% / 3 - 0.85rem), 320px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  #announcementSlider .announcement-card {
    flex: 0 0 min(calc(100% / 2 - 0.625rem), 300px);
  }
}

@media (max-width: 640px) {
  #announcementSlider .announcement-card {
    flex: 0 0 min(calc(100% - 0.25rem), 280px);
  }
}

#announcementSlider .announcement-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

#announcementSlider .announcement-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--surface-warm);
}

#announcementSlider .announcement-card__img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--surface-warm), rgba(255,255,255,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
}

#announcementSlider .announcement-card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#announcementSlider .announcement-card__meta {
  font-size: 0.72rem;
  color: var(--muted-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#announcementSlider .announcement-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#announcementSlider .announcement-card__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan-ink);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
}

#announcementSlider .announcement-card__link:hover {
  text-decoration: underline;
}

/* ── Pengumuman carousel (arrows) ───────────────────────────────── */
/* Side padding reserves a lane for the arrows so they stop sitting on top of
   the first and last card. It is the ONLY inset on the track, so the gap left
   of the first card matches the gap right of the last one. */
.pengumuman-carousel { position: relative; padding: 0 3.25rem; }

/* No scroll-snap: the drift has to be able to rest mid-card. Snap re-engaging
   on release yanked the track to the nearest edge, which read as a flash. */
#announcementSlider {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#announcementSlider::-webkit-scrollbar { display: none; }

/* Full-height hover strips, not circular buttons: pointing at one drifts the
   track continuously (announcements.js) — there is no click step, so the whole
   lane is the target rather than a 46px puck inside it. */
.carousel-arrow {
  position: absolute;
  top: 0;
  bottom: 0.5rem;             /* matches the slider's own padding-bottom */
  z-index: 6;
  width: 3.25rem;
  padding: 0;
  border: 0;
  appearance: none;           /* UA button chrome paints through border:0 */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.carousel-arrow svg { transition: transform 0.2s ease; }
.carousel-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }
.carousel-arrow--prev:hover { background: linear-gradient( 90deg, rgba(15,76,117,0.08), transparent); }
.carousel-arrow--next:hover { background: linear-gradient(270deg, rgba(15,76,117,0.08), transparent); }
.carousel-arrow--prev:hover svg { transform: translateX(-3px); }
.carousel-arrow--next:hover svg { transform: translateX(3px); }

.carousel-arrow[hidden] { display: none; }
.carousel-arrow.is-disabled { opacity: 0.25; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .carousel-arrow svg { transition: none; }
}

/* Past this width the container (--container-max, 1280px) leaves ~70px of page
   margin on each side, enough to park the arrows fully outside the track. The
   lane then goes away and the cards line up with the section heading again. */
@media (min-width: 1420px) {
  .pengumuman-carousel { padding: 0; }
  .carousel-arrow--prev { left: -3.25rem; }
  .carousel-arrow--next { right: -3.25rem; }
}

@media (max-width: 640px) {
  /* Swipe replaces the arrows here, so the lane goes back to the cards. */
  .carousel-arrow { display: none; }
  .pengumuman-carousel { padding: 0; }
}