/* =============================================================================
   Page: Home
   File: css/pages/home.css
   =============================================================================
   Page-specific styles only. Shared header/nav/footer/typography live in
   css/base.css — do not repeat them here.
   ========================================================================== */

/* =============================================================================
   Hero image slider — full-bleed, directly under the sticky nav, crossfade +
   Ken Burns zoom, autoplay every 5s. See js/pages/home.js for the controller.
   Images live in /images/main_page_animation/, linked from index.php.
   ========================================================================== */
.hero-slider{
  position:relative; overflow:hidden;
  margin:-40px calc(50% - 50vw) 0;
  height:clamp(260px,46vw,520px);
  background:var(--wine-dark);
}

.hero-slider__slide{
  position:absolute; inset:0; margin:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.1s ease;
  will-change:opacity,transform;
}
.hero-slider__slide.is-active{
  opacity:1; z-index:1;
  animation:hero-kenburns 6.5s ease-out forwards;
}
@keyframes hero-kenburns{
  from{transform:scale(1.08)}
  to{transform:scale(1)}
}
/* Respect the OS-level "reduce motion" setting: crossfade only, no zoom. */
@media (prefers-reduced-motion:reduce){
  .hero-slider__slide{transition:opacity .4s linear}
  .hero-slider__slide.is-active{animation:none; transform:none}
}

.hero-slider__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,rgba(8,3,6,.55),rgba(8,3,6,0) 45%);
}

.hero-slider__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:22px var(--gap) 26px;
}
.hero-slider__caption .inner{
  max-width:var(--wrap); margin:0 auto; padding-inline:var(--gap);
}
.hero-slider__caption h2{
  margin:0; color:#fff; font:700 clamp(18px,2.6vw,28px)/1.3 Georgia,serif;
  text-shadow:0 1px 6px rgba(0,0,0,.5); max-width:26ch;
}

@media (max-width:640px){
  .hero-slider__caption h2{max-width:20ch}
}

/* =============================================================================
   Announcements bar — plain grey strip directly under the slider, in the
   style of the ticker header on texmin.gov.in. Text-only for now; wire a
   real ticker/marquee in here later if there's content to scroll.
   ========================================================================== */
.announce-bar{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  margin:0 calc(50% - 50vw);
}
.announce-bar__inner{
  display:flex; align-items:center; gap:10px; min-height:44px; padding-block:10px;
}
.announce-bar__icon{width:18px; height:18px; color:var(--wine); flex:none}
.announce-bar strong{color:var(--wine-dark); font-size:15px}

/* =============================================================================
   Director's message — light grey band, circular portrait, large pull-quote
   mark, in the style of the "Announcements" quote block on texmin.gov.in.
   ========================================================================== */
.director-msg{background:var(--surface-2); border-bottom:1px solid var(--line)}
.director-msg__inner{
  display:flex; align-items:center; gap:var(--gap-3);
  padding-block:var(--gap-3);
}
.director-msg__photo{
  width:140px; height:140px; flex:none; border-radius:50%;
  object-fit:cover; background:var(--surface); box-shadow:var(--shadow);
}
.director-msg__quote{position:relative; max-width:66ch}
.director-msg__mark{
  display:block; font:700 56px/1 Georgia,serif; color:var(--wine);
  opacity:.35; margin-bottom:-18px;
}
.director-msg__quote p{
  margin:0 0 10px; color:var(--wine-dark); font:500 clamp(16px,2vw,20px)/1.55 Georgia,serif;
}
.director-msg__quote cite{
  display:block; font-style:normal; color:var(--ink-3); font-size:13px; margin-bottom:14px;
}

@media (max-width:640px){
  .director-msg__inner{flex-direction:column; align-items:flex-start; gap:var(--gap)}
  .director-msg__photo{width:104px; height:104px}
}

/* =============================================================================
   Recent Activities — the small box beside the Director's quote
   =============================================================================
   ONE picture at a time, crossfading. The keyframes are printed by index.php,
   because their shape depends on how many pictures are in the folder; the
   fixed part of the styling is here.

   THE ONE RULE THIS BOX HAS TO OBEY
   It must stay SHORTER than the quotation beside it, or it stops filling the
   empty space and starts setting the height of the whole band. Title and
   stage together come to about 190px against a quote of roughly 220px, and
   .director-msg__inner is left exactly as it was — align-items:center, no
   stretch — so the box is centred in the space rather than pulled to fill it.

   Nothing above this comment was changed to make room for it.
   ========================================================================== */
.ractive{
  flex:0 0 250px; margin-left:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px;
}

.ractive__title{
  margin:0 0 8px; padding-bottom:7px;
  border-bottom:2px solid var(--line-wine);
  color:var(--wine); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}

.ractive__stage{
  position:relative; height:150px;
  border-radius:5px; overflow:hidden; background:var(--surface-2);
}

/* Every picture is stacked in the same place and hidden; the animation in
   index.php brings each one up in its turn. With no animation — a folder
   holding one picture, or a reader who has asked for less movement — the
   first is shown and nothing moves. */
.ractive__pic{position:absolute; inset:0; margin:0; opacity:0}
.ractive__pic.is-first{opacity:1}

.ractive__pic img{display:block; width:100%; height:100%; object-fit:cover}

.ractive__pic figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:14px 9px 6px; color:#fff; font-size:11.5px; line-height:1.3;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  /* One line. A caption that wraps to three covers the picture it labels. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:900px){
  .ractive{flex:0 0 200px}
  .ractive__stage{height:118px}
}

/* Stacked layout: the box is no longer filling a gap, so it may be as wide as
   the column and a little taller. */
@media (max-width:640px){
  .ractive{flex:1 1 auto; width:100%; margin-left:0}
  .ractive__stage{height:170px}
}

/* =============================================================================
   Small icon + heading pair, reused above "About Us", "Key Offerings" and
   "What's New" — matches the little line-icon + bold wine heading pattern
   used throughout texmin.gov.in.
   ========================================================================== */
.section-heading{display:flex; align-items:center; gap:10px; margin:0 0 16px}
.section-heading__icon{width:24px; height:24px; color:var(--wine); flex:none}
.section-heading h2{
  margin:0; font:700 19px/1.3 "Segoe UI",system-ui,sans-serif; color:var(--wine-dark);
}
/* White variant, for headings sitting on a solid wine background. */
.section-heading--invert .section-heading__icon{color:#fff}
.section-heading--invert h2{color:#fff}

/* =============================================================================
   About Us — intro copy + three link buttons on the left, the Director's
   photo card on the right.
   ========================================================================== */
.about-us{padding-block:var(--gap-3)}
.about-us__inner{
  display:grid; gap:var(--gap-3); grid-template-columns:1.5fr 1fr; align-items:start;
}
.about-us__text p{color:var(--ink-2); max-width:68ch}

.about-us__actions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px;
}
.about-us__btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px; border:1px solid var(--wine); border-radius:6px;
  color:var(--wine-dark); text-decoration:none; font-weight:700; font-size:14px;
  text-align:center; transition:background .18s,color .18s;
}
.about-us__btn svg{width:22px; height:22px}
.about-us__btn:hover{background:var(--wine); color:#fff}

/* The right-hand column of the About Us band now carries the silk ring alone.
   .person-card rules are kept — the class is still used on other pages. */
.about-us__people{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.person-card{margin:0; text-align:center}
.person-card img{
  width:140px; height:160px; object-fit:cover; border-radius:6px;
  border-bottom:3px solid var(--wine); box-shadow:var(--shadow);
}
.person-card figcaption{display:flex; flex-direction:column; gap:2px; margin-top:10px}
.person-card strong{font-size:14.5px; color:var(--ink)}
.person-card span{font-size:13px; color:var(--wine)}

/* --------------------------------------------------------- trend deck band
   Sits between About Us and Key Offerings. Full-bleed on a tinted ground so
   the tilted plane has something to sit against — floated on plain white it
   reads as a mistake rather than a surface. */

.silk-deck{
  margin:0 calc(50% - 50vw); padding:var(--gap-3) 0;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.silk-deck__lead{
  max-width:66ch; margin:0 0 var(--gap-2);
  color:var(--ink-2); line-height:1.7; font-size:15.5px;
}
.silk-deck__note{
  max-width:74ch; margin:var(--gap-2) 0 0;
  font-size:12.5px; color:var(--ink-3); line-height:1.65;
}
.silk-deck__note a{color:var(--wine); font-weight:600}

/* ---- the four silks ring ---- */
.about-us__silks{width:100%; max-width:360px; text-align:center}
.about-us__silks-h{
  margin:0; font:700 15px/1.35 Georgia,serif; color:var(--wine-dark);
}

/* The shared ring is sized for a full-width page; it needs to sit smaller in
   this column. Overriding the geometry here keeps css/three-d.css generic. */
.about-us__silks .ring3d-stage{height:250px; margin:0}
.about-us__silks .ring3d{width:150px; height:150px}
.about-us__silks .ring3d__face{
  width:118px; margin:-38px 0 0 -59px; padding:7px 9px;
  transform:rotateY(var(--a)) translateZ(168px);
}
.about-us__silks .ring3d__face b{font-size:12px}
.about-us__silks .ring3d__face span{font-size:10px}
.about-us__silks .ring3d__hub{
  width:92px; height:92px; margin:-46px 0 0 -46px;
}
.about-us__silks .ring3d__hub b{font-size:17px}

@media (max-width:800px){
  .about-us__inner{grid-template-columns:1fr}
  .about-us__people{order:-1}
}
@media (max-width:620px){
  /* Below this width three-d.css flattens the ring into a list; the wrapper
     should stop reserving chart height for it. */
  .about-us__silks .ring3d-stage{height:auto}
  .about-us__silks{max-width:none; text-align:left}
}
@media (max-width:480px){
  .about-us__actions{grid-template-columns:1fr}
}

/* =============================================================================
   Key Offerings / What's New — grey full-bleed band holding the tab strip
   (left) and the solid wine link panel (right), each under its own
   icon + heading. Reuses .tabs / .tab-panel / .wine-panel from css/base.css.
   ========================================================================== */
.key-band{background:var(--surface-2); margin:0 calc(50% - 50vw); padding-block:var(--gap-3)}
.key-band__inner{display:grid; gap:var(--gap-2); grid-template-columns:2fr 1fr}
@media (max-width:800px){
  .key-band__inner{grid-template-columns:1fr}
}

/* =============================================================================
   In Social Media — full-bleed solid wine band, four white cards. Structure
   is placeholder content for now (see the comment in index.php); each
   .social-card is self-contained, so swapping in real posts later is a
   content change, not a layout change.
   ========================================================================== */
.social-band{
  background:var(--wine); margin:var(--gap-3) calc(50% - 50vw) 0; padding-block:var(--gap-3);
}

.social-grid{
  display:grid; gap:var(--gap-2); grid-template-columns:repeat(4,1fr);
}
@media (max-width:900px){ .social-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .social-grid{grid-template-columns:1fr} }

.social-card{
  background:var(--surface); border-radius:8px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18); display:flex; flex-direction:column;
}
.social-card__head{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--line); font-weight:700; color:var(--wine-dark); font-size:14px;
}
.social-card__logo{width:20px; height:20px; flex:none; color:var(--ink-3)}
.social-card__logo--x{color:#000}
.social-card__logo--youtube{color:#d8271f}
.social-card__logo--facebook{color:#1a5cb0}
.social-card__logo--instagram{color:#c22a7a}

.social-card__body{padding:14px; flex:1; display:flex; flex-direction:column; gap:10px}
.social-card__body p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}

.social-card__author{display:flex; align-items:center; gap:10px}
.social-card__avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--wine-tint); color:var(--wine); font:700 12px/34px sans-serif; text-align:center;
}
.social-card__author strong{display:block; font-size:13.5px; color:var(--ink)}
.social-card__handle{display:block; font-size:12px; color:var(--ink-3)}

.social-card__thumb{
  aspect-ratio:16/10; border-radius:6px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--surface) 12px 24px);
  border:1px solid var(--line);
}
.social-card__thumb--video{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#2a2a2a,#050505);
}
.social-card__play{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92);
  color:#d8271f; display:flex; align-items:center; justify-content:center; font-size:16px;
}

/* =============================================================================
   Related portals — the strip that scrolls along the bottom of the home page
   =============================================================================
   Two copies of the same row inside one track, moved exactly half the track's
   width and then started again. Because the second copy is sitting where the
   first one was at the moment it restarts, there is no seam and no rewind: it
   reads as one endless row.

   translateX only — no left, no margin, no scrollLeft. The browser can run a
   transform on the compositor without touching layout, so this costs nothing
   even on the office machines this site is read on.
   ========================================================================== */

.portals{
  /* The page's own grey, not white. The social band above is a full-bleed
     wine block; a white strip pressed straight up against it read as the
     bottom of that block rather than as a section in its own right. Sitting
     the strip on the background colour, with real space above and below,
     separates the two without a rule or a heading having to do the work. */
  background:var(--bg);
  padding-block:var(--gap-3);
}

.portals__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 0 24px;
  overflow:hidden;                       /* the track is wider than the card */
}
.portals .section-heading{margin:0 0 var(--gap); padding-inline:24px}

/* The window the row moves behind. The mask fades both ends, so tiles enter
   and leave rather than being chopped off at a hard edge. */
.portals__viewport{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}

.portals__track{
  display:flex; width:max-content;
  animation:portalsRoll 55s linear infinite;
}
.portals__row{display:flex; align-items:stretch; gap:18px; padding-right:18px}

@keyframes portalsRoll{
  from{transform:translate3d(0,0,0)}
  /* Exactly half: one full copy of the row. Anything else shows the join. */
  to  {transform:translate3d(-50%,0,0)}
}

/* Stopped while somebody is reaching for a tile — with the pointer, or with
   the keyboard. A row of links that keeps sliding is an irritation to anybody
   and an impossibility for anybody whose aim is not steady. */
.portals__viewport:hover .portals__track,
.portals__track:focus-within{animation-play-state:paused}

.portals__tile{
  flex:0 0 auto; width:200px; height:96px;
  display:flex; align-items:center; justify-content:center;
  padding:14px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.portals__tile:hover,
.portals__tile:focus-visible{
  border-color:var(--line-wine);
  box-shadow:0 6px 18px rgba(122,20,66,.14);
  transform:translateY(-2px);
}

.portals__tile img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}

/* The tile shown before its logo file has been added. Set as a deliberate
   thing rather than an obvious gap — it is a working link either way, and it
   becomes the logo the day the file is dropped into images/logo/partners/. */
.portals__tile--text span{
  display:block; text-align:center; line-height:1.35;
  font:700 12.5px/1.35 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.02em; color:var(--wine-dark);
}

@media (max-width:700px){
  .portals{padding-block:var(--gap-2)}
  .portals__card{padding:18px 0 20px}
  .portals .section-heading{padding-inline:16px}
  .portals__tile{width:160px; height:80px; padding:12px 14px}
  .portals__row{gap:12px; padding-right:12px}
}

/* Nothing moves. The row becomes an ordinary horizontal scroller, which is
   the honest fallback: the content is all still reachable, by dragging or by
   the keyboard, without anything sliding out from under the reader. */
@media (prefers-reduced-motion:reduce){
  .portals__viewport{
    overflow-x:auto; -webkit-mask-image:none; mask-image:none;
    scroll-snap-type:x proximity;
  }
  .portals__track{animation:none; width:auto}
  .portals__row:last-child{display:none}     /* the duplicate has no purpose now */
  .portals__tile{scroll-snap-align:center}
}

@media print{ .portals{display:none} }