/* Home page (index.php): the switch, the flip and the grid groups. Also
   loaded by castlookup.php for the switch, the flip and the white panel.
   Colors come from the variables app.css defines. */

/* ---------- Search a name | Search a movie or show ---------- */

.mode-switch{
  display:flex; width:100%; max-width:480px; margin:0 auto 16px;
  padding:4px; gap:4px; border-radius:999px;
  background:var(--card-bg); border:1px solid var(--border-strong);
}
.mode-btn{
  flex:1 1 0; min-width:0; cursor:pointer;
  padding:9px 12px; border:0; border-radius:999px;
  background:transparent; color:#374151;
  font:inherit; font-size:15px; font-weight:600;
  transition:background-color .2s, color .2s;
}
.mode-btn:hover{ color:var(--accent); }
a.mode-btn{ display:block; text-align:center; text-decoration:none; }
.mode-btn[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.mode-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* On a phone the two labels differ in length, so each half sizes to its own
   text and both stay on one line. */
@media (max-width:480px){
  .mode-btn{ flex:1 1 auto; white-space:nowrap; padding:8px 10px; font-size:14px; }
}

/* ---------- flip ---------- */

/* Half a turn out, swap faces while edge-on, half a turn in. Two halves rather
   than one card with a front and back, because the faces differ in height. */
.flip{ perspective:1600px; }
.flip-face[hidden]{ display:none; }
.flip.is-turning-out{ animation:turn-out .2s ease-in forwards; }
.flip.is-turning-in{ animation:turn-in .22s ease-out; }

@keyframes turn-out{
  from{ transform:rotateY(0); opacity:1; }
  to{ transform:rotateY(90deg); opacity:.4; }
}
@keyframes turn-in{
  from{ transform:rotateY(-90deg); opacity:.4; }
  to{ transform:rotateY(0); opacity:1; }
}

/* ---------- grid groups ---------- */

.group-row{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.group-btn{
  cursor:pointer; padding:7px 14px; border-radius:999px;
  border:1px solid var(--border-strong); background:#fff; color:#374151;
  font:inherit; font-size:14px; font-weight:600;
}
.group-btn:hover{ border-color:var(--accent); color:var(--accent); }
.group-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.group-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.group-n{ font-weight:400; }

.multi-item[hidden]{ display:none; }

/* ---------- cast side panel ---------- */

/* castlookup.css narrows #cast-results to 960px; inside the panel it should
   fill the same width as the name side's grid. */
.cast-panel #cast-results{ max-width:none; }
.cast-panel .browse-tabs{ margin-top:10px; }

/* On castlookup.php a cast or a list of matching titles is a reading column:
   across a wide panel a name ends up far from its result. Those views narrow
   the whole panel to castlookup.css's 960px; the browse grid keeps the full
   width. A browser without :has() shows them full width, which still works. */
.cast-panel:not(:has(.browse-tabs)){ max-width:960px; margin-left:auto; margin-right:auto; }
#group-pager{ margin-top:14px; }