/* Homepage "New from Apple" banner and the For Home hero alignment (2026-10-26, full-width banner 2026-10-27). Kept out
   of base.css so changing them doesn't change every page's cached stylesheet. Slide pictures come from
   tools/make-lineup-images.js; the category pages' lineup pictures (tools/make-category-lineups.js) use base.css's
   .cat-family. Apple's text sits beside or under the pictures, never on them. */

/* ---------- For Home hero: the product picture sits level with the text on computers (Jim, 2026-10-26) ---------- */
@media (min-width: 901px) {
  .chooser .hero-img { display: flex; align-items: center; }
}

/* ---------- For Home / For Business tops: the lineup pictures are cut tight to the products, so they fill exactly
   their column (base.css makes hero pictures 125% wide, which pushed the iMac over the text; Jim, 2026-10-27) ---------- */
.chooser .hero-img img.hero-lineup, .biz-hero .hero-img img.hero-lineup { width: 100%; max-width: 100%; margin-left: 0; height: auto; }

/* ---------- Category lineup pictures (base.css .cat-family): keep the picture's own shape, no empty bands ---------- */
.cat-hero .cat-family img { height: auto; }

/* ---------- For Home hero grid (consumer page) ---------- */
.chooser .hero-grid { align-items: center; }
.chooser .hero-grid > * { min-width: 0; }

/* ---------- Homepage banner: full width, one new product per slide (Jim, 2026-10-27) ----------
   Each slide is edge to edge in its own color, with the product big on one side and its name, Apple's tagline and line
   beside it (beside, never on the picture: Apple's rules). All slides share one spot and the banner is as tall as the
   tallest, so changing slides never moves the page; hidden slides stay laid out, invisible and out of reach. */
.hero-slider { position: relative; overflow: hidden; }
.hs-viewport { display: grid; }
.hs-slide { grid-area: 1 / 1; animation: hsFade .6s ease; color: #1a1d21; }
.hs-slide[hidden] { display: block; visibility: hidden; animation: none; }
@keyframes hsFade { from { opacity: 0; } to { opacity: 1; } }
.hs-inner {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px;
  max-width: 1240px; margin: 0 auto; padding: 48px var(--gutter) 96px; min-height: 560px; box-sizing: border-box;
}
.hs-inner > * { min-width: 0; }
.hs-new { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8f3f06; }
.hs-name { margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; letter-spacing: -.02em; }
.hs-name a { color: inherit; text-decoration: none; }
.hs-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hs-tag { margin: 14px 0 0; font-size: clamp(21px, 2.3vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #0171B9; }
.hs-text { margin: 12px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: #3d434a; }
.hs-ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hs-cta, .hs-more {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
}
.hs-cta { background: #0171B9; color: #fff; }
.hs-cta:hover { background: #035a92; }
.hs-more { border: 1.5px solid #0171B9; color: #035a92; }
.hs-more:hover { background: rgba(1, 113, 185, .08); }
.hs-media { display: block; }
/* No CSS shadow on the picture: a drop-shadow filter showed the picture's square outline while a slide faded in
   (Jim saw it on every slide, 2026-10-27). */
.hs-media img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; margin: 0 auto; }
/* Slide colors, each a soft glow behind the product. Text stays dark on the light ones, white on the dark one (AA). */
.th-imac { background: radial-gradient(70% 90% at 72% 45%, #d6e6fa 0%, #e9f1fb 50%, #f6f8fb 100%); }
.th-mbp { background: radial-gradient(70% 90% at 72% 45%, #1477b8 0%, #0a3a5c 55%, #071f33 100%); color: #fff; }
.th-mbp .hs-new { color: #ffcf7a; }
.th-mbp .hs-tag { color: #9ed0ee; }
.th-mbp .hs-text { color: #d6e7f4; }
.th-mbp .hs-cta { background: #fff; color: #0a3a5c; }
.th-mbp .hs-cta:hover { background: #e6f1f9; }
.th-mbp .hs-more { border-color: rgba(255, 255, 255, .8); color: #fff; }
.th-mbp .hs-more:hover { background: rgba(255, 255, 255, .1); }
.th-ipad { background: radial-gradient(70% 90% at 72% 45%, #f6e1cf 0%, #f8ede4 50%, #faf7f4 100%); }
.th-watch { background: radial-gradient(70% 90% at 72% 45%, #e2e6d1 0%, #eef1e4 50%, #f8f9f4 100%); }
.th-homeview { background: radial-gradient(70% 90% at 72% 45%, #e4e3fb 0%, #f0effb 50%, #f7f8fa 100%); }
.th-homepod { background: radial-gradient(70% 90% at 72% 45%, #f8d9e4 0%, #fbe9ef 50%, #fbf6f8 100%); }
/* One set of controls, a white pill at the bottom, readable on every slide color. */
.hs-controls {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 2px 8px;
  background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}
.hs-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
  color: #1a1d21; font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hs-pause { font-size: 13px; }
.hs-btn:hover { background: #eef2f6; }
.hs-dots { display: flex; }
.hs-dot { width: 28px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; padding: 0; }
.hs-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; background: #7b858f;
}
.hs-dot[aria-current="true"]::before { background: #0171B9; width: 22px; margin-left: -11px; border-radius: 6px; }
.hs-btn:focus-visible, .hs-dot:focus-visible, .hs-name a:focus-visible, .hs-cta:focus-visible, .hs-more:focus-visible {
  outline: 3px solid #0171B9; outline-offset: 3px;
}
.th-mbp .hs-name a:focus-visible, .th-mbp .hs-cta:focus-visible, .th-mbp .hs-more:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .hs-slide { animation: none; } }
/* Phones and small tablets: the picture on top, the text centered under it. */
@media (max-width: 900px) {
  .hs-inner { grid-template-columns: 1fr; gap: 12px; padding: 24px var(--gutter) 88px; min-height: 0; text-align: center; }
  .hs-media { order: -1; }
  .hs-media img { max-height: 240px; }
  .hs-text { margin-left: auto; margin-right: auto; font-size: 16px; }
  .hs-ctas { justify-content: center; }
}
@media (max-width: 400px) { .hs-dot { width: 24px; } .hs-btn { width: 40px; } }

/* The welcome line, now just under the banner. */
.chooser .wrap.hs-intro { text-align: center; padding-top: 52px; padding-bottom: 6px; }
.chooser .hs-intro h1, .chooser .hs-intro .lede { margin-left: auto; margin-right: auto; }

/* Homepage "Why GatorTec": four cards (Jim, 2026-10-27), two by two on tablets, one column on phones. */
.res.res-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .res.res-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .res.res-4 { grid-template-columns: 1fr; } }

/* Homepage "Meet the team" (Jim and Zach, 2026-10-27: real people, not a faceless checkout). Pictures from
   tools/make-team-photos.js; Leo's shirt logo is painted out (one Apple signature per page). */
.team-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.team-photo { margin: 0; }
.team-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 50px rgba(10, 45, 71, .18); }
.team-photo figcaption { font-size: 14px; color: var(--slate); margin-top: 10px; }
.team-grid h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin: 12px 0 0; }
.team-grid h2 em { font-style: normal; color: var(--blue); }
.team-lede { font-size: 18px; color: var(--ink-2); line-height: 1.55; margin: 16px 0 26px; max-width: 46ch; }
.team-people { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.team-people li { display: flex; align-items: center; gap: 16px; }
.team-people img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.team-people strong { display: block; font-size: 18px; color: var(--ink); }
.team-people span { font-size: 15.5px; color: var(--slate); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 28px; } }
/* The contact box below is also on white: one gap between them, not two (Jim, 2026-10-27: extra space on phones) */
.section#team { padding-bottom: 0; }