/* Version 2 look: matches the PCS Families app (sites.google.com/view/pcsfamily/pcs-family-app).
   Ivory pages, a crimson top bar, Cormorant Garamond headings over Libre Franklin, soft rounded cards,
   a frosted tab bar that moves into the top bar on a computer. Loaded after styles.css by v2.html only. */
.fam {
  --bg: #FAF7F2; --surface: #ffffff; --ink: #141414; --muted: #6b6560; --line: #E8E1D6;
  --crimson: #BD2041; --crimson-2: #BD2041; --crimson-dk: #8E1530; --crimson-soft: #FBECEF; --gray-soft: #F1ECE4;
  --radius: 18px; --se: "Cormorant Garamond", Georgia, serif; --shadow: 0 4px 18px rgba(0,0,0,.06);
}
.fam body { font-family: "Libre Franklin", system-ui, -apple-system, sans-serif; background: var(--bg); color: #222; }
.fam h1, .fam h2, .fam h3, .fam .brand b { font-family: var(--se); color: var(--ink); letter-spacing: 0; }
.fam h1 { font-size: 2.1rem; font-weight: 700; }
.fam h2 { font-size: 1.75rem; font-weight: 700; color: var(--ink); margin: 28px 0 12px; }
.fam h3 { font-family: var(--se); font-size: 1.35rem; font-weight: 700; }

/* Top bar */
.fam .top { background: var(--crimson); border: 0; box-shadow: 0 2px 12px rgba(142,21,48,.25); }
.fam .top .wrap { min-height: 70px; }
.fam .brand { color: #fff; }
.fam .brand .seal { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; display: grid; place-items: center; flex: none; }
.fam .brand .seal img { width: 40px; height: 40px; }
.fam .brand b { color: #fff; font-size: 1.6rem; line-height: 1; }
.fam .brand span { color: rgba(255,255,255,.88); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.fam .banner { background: #FBF2E4; color: #7a5410; }

/* Tab bar */
.fam .nav { background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.fam .nav a { color: #9a938b; font-weight: 600; }
.fam .nav a.on { color: var(--crimson); }
.fam .nav a.on::after { display: none; }
.fam .nav a svg { stroke-width: 1.8; }

/* Cards and lists */
.fam .card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.fam a.card:active { background: var(--bg); }
.fam .announce { border-left: 0; box-shadow: var(--shadow); }
.fam .announce .kicker, .fam .hero .kicker { color: var(--crimson); letter-spacing: .14em; font-size: .78rem; }
.fam .announce b { font-family: var(--se); font-size: 1.4rem; line-height: 1.15; display: block; color: var(--ink); }
.fam .empty { color: var(--muted); }

/* Game cards: a calendar tile, the matchup, then the score and status */
.fam .game { grid-template-columns: auto 1fr auto; gap: 2px 14px; }
.fam .game .cal { grid-row: 1 / span 3; grid-column: 1; }
.fam .game .team, .fam .game .opp, .fam .game .meta { grid-column: 2; }
.fam .game .right { grid-column: 3; }
.fam .game .team { color: var(--crimson); font-size: .74rem; letter-spacing: .12em; }
.fam .game .opp { font-family: var(--se); font-size: 1.35rem; line-height: 1.15; color: var(--ink); }
.fam .game .score { font-family: var(--se); font-size: 2rem; font-weight: 700; color: var(--ink); }
.cal { width: 58px; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--line); background: #fff; align-self: center; }
.cal small { display: block; background: var(--crimson); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 0; }
.cal b { display: block; font-family: var(--se); font-size: 1.75rem; line-height: 1.25; color: var(--ink); }
.fam .pill { font-size: .78rem; padding: 4px 10px; }
.fam .pill.sched { background: var(--crimson-soft); color: var(--crimson); }
.fam .pill.T, .fam .pill.final { background: #eee; color: #444; }

/* Buttons, dropdowns, quick links */
.fam .btn { border-radius: 12px; border: 0; background: var(--bg); color: var(--ink); font-weight: 600; }
.fam .card .btn { background: var(--bg); }
.fam .btn.primary { background: var(--crimson); color: #fff; }
.fam .btn.quiet { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.fam .fbar select, .fam .fbar a { border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); font-weight: 600; }
.fam .fbar select.on { background-color: var(--crimson); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"); }
.fam input, .fam select, .fam textarea { border-radius: 12px; }

/* Today: photo hero, "Next up", icon quick links */
.fhero { margin: 16px 0 0; border-radius: 22px; overflow: hidden; position: relative; color: #fff; min-height: 200px; display: flex; align-items: flex-end; background: var(--crimson-dk); }
.fhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(142,21,48,.95), rgba(0,0,0,.08) 75%); }
.fhero div { position: relative; z-index: 2; padding: 20px; }
.fhero small { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.fhero h1 { color: #fff; font-size: 2.2rem; margin: 4px 0 2px; }
.fhero p { margin: 0; opacity: .92; }
.fnext { margin-top: 14px; display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.fnext .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); }
.fnext h3 { font-size: 1.45rem; line-height: 1.1; }
.fnext p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.fnext .chev { margin-left: auto; color: #bbb; font-size: 1.6rem; }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; margin-top: 4px; }
.qa a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; text-align: center; color: var(--ink); text-decoration: none; }
.qa span { width: 64px; height: 64px; border-radius: 20px; background: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 3px 12px rgba(0,0,0,.06); transition: transform .15s; }
.qa a:active span { transform: scale(.92); }
.ttl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ttl h2 { margin-bottom: 12px; }
.ttl a { font-size: .85rem; font-weight: 600; color: var(--crimson); text-decoration: none; padding: 8px 14px; border-radius: 20px; background: rgba(189,32,65,.08); white-space: nowrap; }
.ffoot { text-align: center; font-size: .85rem; color: var(--muted); padding: 28px 0 8px; }
@media (max-width: 380px) { .qa span { width: 56px; height: 56px; font-size: 26px; } .fam .game .opp { font-size: 1.2rem; } }

/* Computer: tabs move into the crimson bar, wider layout */
@media (min-width: 900px) {
  .fam .top .wrap, .fam main.wrap { max-width: 1200px; padding-left: 32px; padding-right: 32px; }
  .fam .top .wrap { min-height: 78px; }
  .fhero { min-height: 340px; } .fhero div { padding: 40px; } .fhero h1 { font-size: 3.4rem; }
  .qa { grid-template-columns: repeat(8, 1fr); }
  .qa span { width: 76px; height: 76px; }
  .qa a:hover span { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
  .fam .list.two { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .fam .game { grid-template-columns: auto 1fr; }
  .fam .game .right { grid-row: auto; grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; text-align: left; margin-top: 6px; }
  .fam .game .score { font-size: 1.6rem; line-height: 1; }
}
.fhero img { object-position: center 62%; }

/* Sign-in button: a light pill on the crimson bar (like the Families bell) */
.fam .signin { border: 0; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.fam .signin.on { background: #fff; color: var(--crimson); }
/* Wide screens: tabs move into the crimson bar. They need about 1100px to sit beside the
   "Panthers Game Day" title without overlapping it, so iPads narrower than that keep the bottom tab bar. */
@media (min-width: 1100px) {
  .fam body { padding-bottom: 0; }
  .fam .nav { top: 0; bottom: auto; left: auto; right: calc(max(32px, (100vw - 1200px) / 2 + 32px) + 136px); /* room for the sign-in button */
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; height: 78px; padding-bottom: 0; z-index: 11; }
  .fam .nav .wrap { height: 100%; align-items: center; gap: 4px; max-width: none; padding: 0; }
  .fam .nav a { flex: none; flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: rgba(255,255,255,.85); font-size: .95rem; }
  .fam .nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
  .fam .nav a.on { background: #fff; color: var(--crimson); }
  .fam .nav a svg { width: 20px; height: 20px; }
  /* Sign in / Account: same size, text and spacing as the tabs beside it */
  .fam .signin { min-height: 44px; height: 44px; padding: 0 16px; gap: 8px; font-size: .95rem; font-weight: 600; line-height: 1; }
  .fam .signin svg { width: 20px; height: 20px; }
  /* "New" dot sits on the tab's icon, not over its label */
  .fam .nav a { position: relative; }
  .fam .nav .nav-dot { top: 8px; left: 30px; }
}

/* Version 3 (v3.html): school pages — calendar rows, news cards, faces, campuses */
.evrow { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; }
.evrow b { font-weight: 600; color: var(--ink); display: block; line-height: 1.3; }
.evrow p { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.pill.camp- { background: var(--crimson-soft); color: var(--crimson); }
.pill.camp-mu { background: #eee; color: #444; }
.pill.camp-all { background: var(--crimson-dk); color: #fff; }
.day { margin: 22px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ngrid { grid-template-columns: 1fr; }
.ncard { display: grid; grid-template-columns: 112px 1fr; padding: 0; overflow: hidden; }
.ncard img { width: 100%; height: 100%; min-height: 104px; object-fit: cover; }
.ncard div { padding: 12px 14px; }
.ncard small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); }
.ncard b { display: block; font-family: var(--se); font-size: 1.25rem; line-height: 1.2; color: var(--ink); margin-top: 2px; }
.ncard p { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
.faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.face { background: none; border: 0; padding: 4px 0; cursor: pointer; font-size: .85rem; color: var(--ink); text-align: center; }
.face img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--crimson); margin: 3px auto 6px; display: block; }
.staffgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.sf { padding: 0; overflow: hidden; text-align: left; cursor: pointer; border: 0; font: inherit; }
.sf img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; display: block; }
.sf b { display: block; font-family: var(--se); font-size: 1.25rem; color: var(--ink); padding: 10px 12px 0; }
.sf span { display: block; font-size: .8rem; color: var(--crimson); font-weight: 600; padding: 0 12px 14px; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet .bx { background: #fff; width: 100%; max-width: 480px; border-radius: 24px 24px 0 0; padding: 10px 22px calc(28px + env(safe-area-inset-bottom, 0px)); max-height: 85vh; overflow: auto; }
.sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: #ddd; margin: 0 auto 16px; }
.sheet img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: top; margin: 0 auto 12px; display: block; }
.sheet h3 { text-align: center; font-size: 1.8rem; }
.sheet .rl { text-align: center; color: var(--crimson); font-weight: 600; font-size: .9rem; margin: 2px 0 14px; }
.sheet .btn { margin-top: 16px; }
.campus { padding: 0; overflow: hidden; }
.campus img { width: 100%; height: 150px; object-fit: cover; display: block; }
.campus > div { padding: 16px; }
.campus small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); }
.campus h3 { font-size: 1.5rem; margin: 2px 0 4px; }
.campus p { margin: 0; }
.resrow { display: flex; align-items: center; gap: 14px; }
.resrow > span:first-child { font-size: 1.4rem; }
.resrow b { font-weight: 600; color: var(--ink); }
.resrow p { margin: 0; font-size: .85rem; color: var(--muted); }
.resrow .chev { margin-left: auto; color: #bbb; font-size: 1.5rem; }
.post { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.post img { width: 38px; height: 38px; border-radius: 50%; }
.post p { margin: 3px 0 0; }
@media (min-width: 900px) {
  .ngrid { grid-template-columns: repeat(3, 1fr); }
  .ncard { display: block; }
  .ncard img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .faces { grid-template-columns: repeat(8, 1fr); }
  .face img { width: 86px; height: 86px; }
  .staffgrid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .sheet { align-items: center; }
  .sheet .bx { border-radius: 24px; max-width: 540px; }
}

/* Video viewer in the PCS Families look */
.fam .viewer, .fam .vitem { border: 0; box-shadow: var(--shadow); border-radius: 18px; }
.fam .vitem.on { box-shadow: 0 0 0 2px var(--crimson), var(--shadow); background: #fff; }
.fam .vinfo h2 { font-size: 1.6rem; margin: 2px 0 0; }
.fam .vtext b { font-family: var(--se); font-size: 1.2rem; color: var(--ink); }