/* ==========================================================================
   Vivek Jyoti Samman  —  /page/vivek-jyoti-samman/
   Loaded ALONGSIDE page-head.css, which supplies the photo banner and the
   heading with its rule. This file is only the grid of honourees.

   Each card is a portrait, a name, what the person does, and a Watch Now
   button opening their film on YouTube.
   ========================================================================== */

.samman-section { background: var(--page-alt); }

/* ============================================================ GRID ======= */
/* Three to a row, a fixed count rather than an auto-fit minimum: auto-fit
   divides the 1240px shell by that minimum and would put four across, which
   is not what this page is — a fourth column makes every portrait smaller for
   no gain. The count steps down explicitly in the responsive block below.

   minmax(0, 1fr), never plain 1fr: a track's default minimum is auto, the
   width of its longest unbreakable word, so one long role would push its
   column past its share and the page sideways with it. */
.samman-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.samman-card {
  display: flex;
  flex-direction: column;
  /* Equal height across the row whatever the role wraps to, so the Watch Now
     buttons sit level instead of stepping up and down the row. */
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.samman-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* ---------------------------------------------------------- portrait ---- */
/* A fixed shape with a cover fit, so portrait, landscape and square
   originals all come out the same size in a row and nothing has to be
   cropped before it goes in. Change the ratio here and every card follows. */
.samman-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--page-alt);
}
.samman-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit in the upper half of a portrait far more often than the middle,
     so a cover crop that keeps the top loses far fewer heads than a centred
     one. */
  object-position: center top;
  display: block;
}

/* Stands in for a portrait that is not uploaded yet, so a card can be written
   before its photograph exists — see the note in includes/samman_card.html. */
.samman-card__missing {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg, #e8e8e8 0 10px, #e2e2e2 10px 20px);
  color: var(--muted);
}
.samman-card__missing svg { width: 26px; height: 26px; fill: currentColor; opacity: .55; }

/* -------------------------------------------------------------- body ---- */
.samman-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px 16px 16px;
}

.samman-card__name {
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
}
.samman-card__role {
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.55;
}

/* The optional longer note, shut until Read More is pressed. The explicit
   display:none is not redundant: the hidden attribute is only a UA style
   rule, and ANY display declaration that matches the element overrides it. */
.samman-card__more {
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.55;
}
.samman-card__more[hidden] { display: none; }

/* --------------------------------------------------- the Read More ------ */
/* A <button>, so the browser's defaults all have to be undone: it does not
   inherit the page font and arrives with a border, a grey face and padding. */
.samman-card__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--transition);
}
.samman-card__toggle:hover { color: #a80217; text-decoration: underline; }
.samman-card__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.samman-card__caret {
  flex: none;
  width: 8px; height: 8px;
  fill: currentColor;
  transition: transform var(--transition);
}
.samman-card__toggle[aria-expanded="true"] .samman-card__caret { transform: rotate(90deg); }

/* Two labels, one hidden. Swapping them off aria-expanded keeps the wording
   in the markup where it can be edited rather than in a string in main.js. */
.samman-card__less { display: none; }
.samman-card__toggle[aria-expanded="true"] .samman-card__more-label { display: none; }
.samman-card__toggle[aria-expanded="true"] .samman-card__less { display: inline; }

/* ------------------------------------------------------- Watch Now ------ */
/* margin-top:auto pins the button to the foot of the card, which is what
   keeps the row of buttons level under roles of different lengths. */
.samman-card__watch {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-top: auto;
  padding: 7px 15px;
  background: var(--red);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background var(--transition);
}
.samman-card__watch:hover { background: #a80217; color: #fff; }
.samman-card__watch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.samman-card__watch svg { flex: none; width: 11px; height: 11px; fill: currentColor; }

/* Shown in place of the button while no film is linked. A line of type rather
   than a dead button: something that looks pressable and is not is worse than
   nothing in its place. */
.samman-card__pending {
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: .74rem;
  font-style: italic;
}

/* ==========================================================================
   Responsive
   Three across, then two, then one. A portrait has a floor below which the
   face stops reading, so the count drops rather than the cards shrinking.
   ========================================================================== */
@media (max-width: 991.98px) {
  .samman-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 479.98px) {
  .samman-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .samman-card__media { aspect-ratio: 16 / 10; }
  .samman-card__body { padding: 12px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .samman-card,
  .samman-card__toggle,
  .samman-card__caret,
  .samman-card__watch { transition: none; }
  .samman-card:hover { transform: none; }
}