/*
 * Homepage: the photo strip ("From the Gallery"), "Meet the team" and "Follow Geetanjali" (index.php).
 * Every class is hm-* and scoped under .hm-home; the tokens (--hm-navy, --hm-gold, --hm-ease ...) and the shared pieces
 * (.hm-head, .hm-eyebrow, .hm-title, .hm-lead, .hm-more) come from css/home.css. Light page: the strip is a navy band like
 * "Our Impact", the other two sit on cream. Motion is transform / opacity / clip-path only and is off for prefers-reduced-motion.
 */

/* ====================================================================================================================
   From the Gallery
   A strip of the newest public photos, edge to edge. It moves only when the visitor moves it (touch, wheel, keyboard, the two
   buttons): the partners strip further down already scrolls by itself, and a second moving band would be too much.
   ==================================================================================================================== */

.hm-home #gallery-strip.hm-gallery {
  padding-block: clamp(2.75rem, 1.8rem + 3.2vw, 4.75rem);
  background:
    radial-gradient(48rem 24rem at 100% 0, rgba(201, 164, 107, 0.2), transparent 64%),
    linear-gradient(180deg, #0f2f58 0%, #081f3d 100%);
  color: #fff;
  overflow: hidden;
  text-align: left;
}
.hm-home .hm-gallery .hm-eyebrow { color: var(--hm-gold-soft); }
.hm-home .hm-gallery .hm-eyebrow::before { background: var(--hm-gold-soft); }
.hm-home .hm-gallery .hm-title { color: #fff; text-shadow: none; }
.hm-home .hm-gallery .hm-lead { color: #c3d0dc; }
.hm-home .hm-gallery a:focus-visible,
.hm-home .hm-gallery button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hm-home .hm-reel__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.hm-home .hm-gallery a.hm-more {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.hm-home .hm-gallery a.hm-more:hover,
.hm-home .hm-gallery a.hm-more:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--hm-navy);
}
.hm-home .hm-reel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
}
.hm-home .hm-reel__btn[hidden] { display: none; }
.hm-home .hm-reel__btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--hm-navy); }
.hm-home .hm-reel__btn:disabled { opacity: 0.35; cursor: default; }

/* The strip. The first photo lines up with the page's text column; the next one is cut off at the screen's edge on purpose:
   that is what says "there is more". */
.hm-home .hm-reel {
  --reel-h: clamp(13rem, 8rem + 17vw, 20rem);
  --reel-edge: max(1.25rem, calc((100% - 1100px) / 2 + 20px));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--reel-edge);
  scrollbar-width: none;
  padding-block: 0.25rem 0.5rem;
}
.hm-home .hm-reel::-webkit-scrollbar { display: none; }
.hm-home .hm-reel__track {
  display: flex;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  width: max-content;
  margin: 0;
  padding: 0 var(--reel-edge);
  list-style: none;
}
.hm-home .hm-shot {
  flex: none;
  width: calc(var(--reel-h) * var(--r, 1));       /* the photo's own proportions (clamped in PHP), so the page never jumps as images load */
  height: var(--reel-h);
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.hm-home .hm-shot a {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #12345f;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
}
.hm-home .hm-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--hm-ease);
}
.hm-home .hm-shot__cap {                         /* a caption slides up over the photo on hover / keyboard focus (always shown on touch) */
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.15rem;
  padding: 2.4rem 1rem 0.95rem;
  /* dark enough by the time the words start, even on a white poster: the text begins about a third of the way down */
  background: linear-gradient(180deg, transparent 0, rgba(4, 16, 32, 0.84) 34%, rgba(4, 16, 32, 0.94) 100%);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.3s, transform 0.4s var(--hm-ease);
}
.hm-home .hm-shot__cap b { font: 700 1rem / 1.25 var(--hm-serif); overflow-wrap: anywhere; }
.hm-home .hm-shot__cap time { font: 700 0.74rem / 1.2 var(--hm-sans); letter-spacing: 0.1em; text-transform: uppercase; color: #dbe5ef; }
.hm-home .hm-shot a:hover img,
.hm-home .hm-shot a:focus-visible img { transform: scale(1.05); }
.hm-home .hm-shot a:hover .hm-shot__cap,
.hm-home .hm-shot a:focus-visible .hm-shot__cap { opacity: 1; transform: none; }
@media (hover: none) {
  .hm-home .hm-shot__cap { opacity: 1; transform: none; }
}

.hm-home .hm-shot--more { width: calc(var(--reel-h) * 0.78); }
.hm-home .hm-shot--more a {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  text-align: center;
  transition: background-color 0.3s;
}
.hm-home .hm-shot--more a:hover,
.hm-home .hm-shot--more a:focus-visible { background: rgba(255, 255, 255, 0.14); }
.hm-home .hm-shot__go {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2cb7e, #d4a24a);
  color: #1a1305;
  transition: transform 0.3s var(--hm-ease);
}
.hm-home .hm-shot--more a:hover .hm-shot__go,
.hm-home .hm-shot--more a:focus-visible .hm-shot__go { transform: translateX(4px); }
.hm-home .hm-shot--more strong { font: 700 1.15rem / 1.2 var(--hm-serif); }
.hm-home .hm-shot--more span:last-child { font-size: 0.85rem; color: #c3d0dc; }

/* ====================================================================================================================
   Meet the team
   "The arcade": every portrait stands in an arch, like a window in a colonnade. The faculty coordinators are larger (they guide
   the society), the core committee smaller; both groups sit on one baseline, each under a label that is a hairline with a name in
   it. A linked person lifts and gets a gold ring. No photo (or a private profile): the person's initials on a soft tint.
   ==================================================================================================================== */

.hm-home #team-preview.hm-team { padding-block: clamp(3rem, 2rem + 3.6vw, 5rem); }
.hm-home .hm-team .hm-head { margin-bottom: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); }

.hm-home .hm-people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;                  /* the groups share a baseline: the arches stand on the same line */
  gap: 2.5rem clamp(1.5rem, 0.5rem + 3vw, 2.5rem);
}
.hm-home .hm-people__group { display: grid; gap: 1.5rem; min-width: 0; }
.hm-home .hm-people__group--faculty { --hm-arch-w: 7.5rem; }
.hm-home .hm-people__group--core { --hm-arch-w: 6.25rem; }

/* the label is a hairline with the group's name in it, as wide as the group below it */
.hm-home .hm-people__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  font: 700 0.72rem / 1 var(--hm-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hm-gold-ink);
}
.hm-home .hm-people__label::before,
.hm-home .hm-people__label::after { content: ""; flex: 1 1 1rem; min-width: 1rem; height: 1px; background: linear-gradient(90deg, transparent, var(--hm-gold)); }
.hm-home .hm-people__label::after { transform: scaleX(-1); }

.hm-home .hm-people__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-home .hm-person {
  --hm-arch-h: calc(var(--hm-arch-w) * 1.25);
  width: calc(var(--hm-arch-w) + 1rem);
  min-height: calc(var(--hm-arch-h) + 5.6rem);     /* a fixed text zone, so every arch ends on the same line however long a name is */
  margin: 0;
  padding: 0;
}
.hm-home .hm-person__link {
  display: grid;
  grid-template-rows: var(--hm-arch-h) auto;
  justify-items: center;
  align-content: start;
  gap: 0.15rem;
  min-height: 2.75rem;
  color: var(--hm-ink);
  text-align: center;
  text-decoration: none;
}
.hm-home .hm-person__photo {
  display: grid;
  place-items: center;
  width: var(--hm-arch-w);
  height: var(--hm-arch-h);
  margin-bottom: 0.7rem;
  overflow: hidden;
  border-radius: calc(var(--hm-arch-w) / 2) calc(var(--hm-arch-w) / 2) 0.75rem 0.75rem;     /* an arch: a half circle on top, nearly square below */
  background: #e8eef7;
  color: var(--hm-navy);
  box-shadow: 0 0 0 3px var(--hm-cream), 0 0 0 4px rgba(10, 35, 66, 0.16), 0 16px 22px -16px rgba(10, 35, 66, 0.5);
  transition: transform 0.4s var(--hm-ease), box-shadow 0.3s;
}
.hm-home .hm-person__photo[data-tone="1"] { background: #f5ecda; color: #6b4c12; }
.hm-home .hm-person__photo[data-tone="2"] { background: #e1efe9; color: #1d5446; }
.hm-home .hm-person__photo[data-tone="3"] { background: #f1e4ec; color: #70324f; }
.hm-home .hm-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }   /* faces sit high in a portrait */
.hm-home .hm-person__initials { font: 700 calc(var(--hm-arch-w) * 0.3) / 1 var(--hm-serif); letter-spacing: 0.02em; }
.hm-home .hm-person__name {
  font: 700 1rem / 1.25 var(--hm-serif);
  color: var(--hm-navy);
  overflow-wrap: anywhere;
}
.hm-home .hm-person__role {
  font: 700 0.68rem / 1.35 var(--hm-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-gold-ink);
}
.hm-home a.hm-person__link:hover .hm-person__photo,
.hm-home a.hm-person__link:focus-visible .hm-person__photo {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--hm-cream), 0 0 0 5px var(--hm-gold), 0 22px 26px -16px rgba(10, 35, 66, 0.55);
}
.hm-home a.hm-person__link:hover .hm-person__name,
.hm-home a.hm-person__link:focus-visible .hm-person__name {
  text-decoration: underline;
  text-decoration-color: var(--hm-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ====================================================================================================================
   Follow Geetanjali
   One long, rounded bar cut into equal segments by hairlines (the gap shows the bar's own colour); each segment is a link.
   ==================================================================================================================== */

.hm-home #follow-us.hm-follow { padding-block: clamp(2.75rem, 1.8rem + 3.2vw, 4.5rem); }
.hm-home .hm-follow .hm-head { margin-bottom: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }

.hm-home .hm-social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                                      /* the hairlines */
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 24px;
  background: var(--hm-line);
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.05), 0 16px 32px -22px rgba(10, 35, 66, 0.35);
  list-style: none;
}
.hm-home .hm-social[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-home .hm-social[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-home .hm-social[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.hm-home .hm-social > li { margin: 0; padding: 0; background: #fff; min-width: 0; }

.hm-home a.hm-social__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 5.25rem;
  padding: 1.1rem 1.35rem;
  color: var(--hm-navy);
  text-decoration: none;
}
.hm-home a.hm-social__link::before {             /* the segment fills navy on hover (opacity only) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hm-navy);
  opacity: 0;
  transition: opacity 0.3s;
}
.hm-home .hm-social__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--hm-cream);
  color: var(--hm-gold-ink);
  transition: background-color 0.3s, color 0.3s;
}
.hm-home .hm-social__icon svg { width: 1.15rem; height: 1.15rem; }
.hm-home .hm-social__text { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.hm-home .hm-social__text strong { font: 700 1.02rem / 1.2 var(--hm-sans); }
.hm-home .hm-social__text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--hm-muted);
  transition: color 0.3s;
}
.hm-home .hm-social__go {
  flex: none;
  font-size: 0.8rem;
  transform: rotate(-45deg);
  transition: transform 0.3s var(--hm-ease);
}
.hm-home a.hm-social__link:hover,
.hm-home a.hm-social__link:focus-visible { color: #fff; }
.hm-home a.hm-social__link:hover::before,
.hm-home a.hm-social__link:focus-visible::before { opacity: 1; }
.hm-home a.hm-social__link:hover .hm-social__icon,
.hm-home a.hm-social__link:focus-visible .hm-social__icon { background: rgba(255, 255, 255, 0.12); color: var(--hm-gold-soft); }
.hm-home a.hm-social__link:hover .hm-social__text span,
.hm-home a.hm-social__link:focus-visible .hm-social__text span { color: #c3d0dc; }
.hm-home a.hm-social__link:hover .hm-social__go,
.hm-home a.hm-social__link:focus-visible .hm-social__go { transform: rotate(-45deg) translateX(4px); }
.hm-home a.hm-social__link:focus-visible { outline: 3px solid var(--hm-gold-ink); outline-offset: -3px; }

/* ====================================================================================================================
   Narrower screens
   ==================================================================================================================== */

@media (max-width: 900px) {
  .hm-home .hm-social[data-count="3"],
  .hm-home .hm-social[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-home .hm-social > li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd segment out takes the whole last row */
}
@media (max-width: 560px) {
  .hm-home .hm-reel__btn { display: none; }                 /* swipe */
  .hm-home .hm-reel { --reel-h: 13rem; }
  .hm-home .hm-people { gap: 1.75rem 1rem; }
  .hm-home .hm-people__group { gap: 1.1rem; }
  .hm-home .hm-people__group--faculty { --hm-arch-w: 5.5rem; }     /* three faculty arches fit one row at 375 px */
  .hm-home .hm-people__group--core { --hm-arch-w: 5rem; }
  .hm-home .hm-person { width: calc(var(--hm-arch-w) + 0.75rem); min-height: calc(var(--hm-arch-h) + 5.2rem); }
  .hm-home .hm-people__list { gap: 1.25rem 0.25rem; }
  .hm-home .hm-person__name { font-size: 0.92rem; }
  .hm-home a.hm-social__link { gap: 0.7rem; padding: 0.95rem 1rem; }
  .hm-home .hm-social__go { display: none; }
}
@media (max-width: 400px) {
  .hm-home .hm-social,
  .hm-home .hm-social[data-count] { grid-template-columns: minmax(0, 1fr); }
  .hm-home .hm-social__go { display: block; }
}

/* ====================================================================================================================
   Reduced motion: nothing slides, scales or fades; the strip still scrolls (the visitor's own movement)
   ==================================================================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hm-home .hm-shot img,
  .hm-home .hm-shot__cap,
  .hm-home .hm-shot__go,
  .hm-home .hm-shot--more a,
  .hm-home .hm-reel__btn,
  .hm-home .hm-person__photo,
  .hm-home .hm-social__icon,
  .hm-home .hm-social__text span,
  .hm-home .hm-social__go,
  .hm-home a.hm-social__link::before { transition: none; }

  .hm-home .hm-shot a:hover img,
  .hm-home .hm-shot a:focus-visible img,
  .hm-home .hm-shot--more a:hover .hm-shot__go,
  .hm-home .hm-shot--more a:focus-visible .hm-shot__go,
  .hm-home a.hm-person__link:hover .hm-person__photo,
  .hm-home a.hm-person__link:focus-visible .hm-person__photo { transform: none; }
  .hm-home .hm-shot__cap { transform: none; }
  .hm-home a.hm-social__link:hover .hm-social__go,
  .hm-home a.hm-social__link:focus-visible .hm-social__go { transform: rotate(-45deg); }
}

/* ====================================================================================================================
   Print: a strip of photos is no use on paper, and the navy band would print white text on white
   ==================================================================================================================== */

@media print {
  .hm-home #gallery-strip { display: none; }
  .hm-home .hm-social { box-shadow: none; }
}