/* The IFC 1.3 page (fc13.html), S102. The home page's type scale and section rhythm (css/home.css): Title Case labels
   with one line under each, sections alternating paper and white. The one bold thing is the board in 3D in the hero.
   Light only. Nothing moves until the visitor asks, apart from the board settling once. */

.fc13 main { overflow-x: clip; }
.fc13 {
  --t-h1: clamp(34px, 3.6vw, 50px);
  --t-h2: clamp(28px, 2.8vw, 38px);
  --t-h3: 20px;
  --t-lead: clamp(18px, 1.4vw, 21px);
  --t-body: 17px;
  --t-small: 15px;
  --sec-pad: clamp(64px, 8vw, 104px);
}
.fc13 main h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.fc13 main h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; margin: 0; }
.fc13 main p { text-wrap: pretty; }

.fc-sec { padding: var(--sec-pad) 0; }
.fc-sec-white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fc-sec-tint { background: var(--navy-50); }
.fc-sub { margin: 10px 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }
.fc-body { margin: 16px 0 0; max-width: 56ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }
.fc-link { font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.fc-link:hover { color: var(--navy-600); }
.fc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }
.fc-pic { width: 100%; height: auto; border-radius: var(--r-media); border: 1px solid var(--line); box-shadow: var(--shadow-2); display: block; }

/* ------------------------------------------------------------------------------------------------ hero */
.fc13 .product { padding-top: clamp(20px, 3vw, 36px); padding-bottom: var(--sec-pad); gap: clamp(28px, 4vw, 64px); }
.buybox h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; }
.fc-name { display: block; margin-bottom: 12px; font-size: 17px; line-height: 1.3; letter-spacing: 0; font-weight: 600; color: var(--ink-3); }
.fc-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); margin: 18px 0 0; max-width: 40ch; }
.fc-note { margin: 12px 0 0; font-size: 17px; font-weight: 500; color: var(--ink-2); }
.fc13 .price-big { margin-top: 24px; }

/* The gallery: the 3D board fills the first panel. */
.fc13 .gallery-main { padding: 20px; }
.fc13 .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.fc13 .thumbs button { position: relative; overflow: hidden; }
.fc13 .thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; } /* a thumbnail inside a control: the 6 px allowed in site.css */
.fc-3d {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.gallery-main .slide > img { width: auto; max-width: 100%; max-height: 100%; height: auto; border-radius: var(--r-card); display: block; }
.gallery-main #g-3d { grid-template-rows: minmax(0, 1fr) auto; }

.fc-stage { position: relative; justify-self: stretch; align-self: stretch; width: 100%; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fc-canvas { position: absolute; inset: -4% -6% -2%; cursor: grab; }
.fc-canvas.grabbing { cursor: grabbing; }
.fc-canvas canvas { width: 100% !important; height: 100% !important; display: block; outline: none; }
/* Until WebGL is up (or without it) the render stands in. */
.fc-still { position: absolute; inset: 4% 6%; width: 88%; height: 92%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(13, 24, 48, .16)); transition: opacity .5s ease; }
.fc-stage.live .fc-still { opacity: 0; pointer-events: none; }

/* The dots ride on the parts as the board turns (fc13.js moves them with transforms). */
.fc-dots { position: absolute; inset: -4% -6% -2%; pointer-events: none; }
.fc-dot {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; pointer-events: auto; transition: opacity .25s ease;
}
.fc-dot::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--navy), 0 4px 12px rgba(13, 24, 48, .35);
  transition: transform .2s var(--ease), background-color .2s ease;
}
.fc-dot:hover::before, .fc-dot:focus-visible::before, .fc-dot[aria-pressed="true"]::before { transform: scale(1.35); background: var(--navy); }
.fc-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fc-dot.back { opacity: 0; pointer-events: none; }
.fc-dot .lbl {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 4px); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-btn);
  opacity: 0; transition: opacity .18s ease, transform .18s var(--ease); pointer-events: none;
}
.fc-dot:hover .lbl, .fc-dot:focus-visible .lbl { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) {
  .fc-dots.fresh .fc-dot::after {
    content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--navy); opacity: 0;
    animation: fc-ping 2.4s ease-out 2.4s 3;
  }
}
@keyframes fc-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* What the tapped part does. */
.fc-part {
  position: absolute; left: 2%; bottom: 2%; max-width: min(340px, 86%); padding: 12px 16px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(20, 51, 107, .16); border: 1px solid var(--line);
}
.fc-part b { display: block; font-size: 16px; }
.fc-part span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .fc-part:not([hidden]) { animation: fc-up .3s var(--ease); } }
@keyframes fc-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fc-hint { transition: opacity .4s ease; }
.fc-hint.gone { opacity: 0; }

/* ------------------------------------------------------------------------------------------------ What It Does */
/* The board from above beside the list of what it does (S166 taste 5); the picture stays in view on a computer. */
.fc-does-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.fc-does-pic { margin: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.fc-does-pic img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 34px rgba(13, 24, 48, .14)); }
.fc-does { margin: 28px 0 0; border-top: 1px solid var(--line); }
.fc-does > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fc-does dt { font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.fc-does dd { margin: 6px 0 0; color: var(--ink-2); font-size: var(--t-body); line-height: 1.55; max-width: 52ch; }
@media (max-width: 900px) {
  .fc-does-split { grid-template-columns: 1fr; }
  .fc-does-pic { position: static; max-width: 340px; }
}

/* ------------------------------------------------------------------------------------------------ Wiring */
.fc-wiring { margin-top: 32px; }
.fc-wiring .wd-wrap { box-shadow: var(--shadow-1); }
.fc-need { margin: 22px 0 0; max-width: 80ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }
.fc-need b { color: var(--ink); }

/* ------------------------------------------------------------------------------------------------ Specifications, In the Box */
.fc13 .spec-groups { margin-top: 32px; }
.fc13 .spec-group { background: var(--paper); }
/* In the Box: the icon and the words, two columns, no tile around each (S166 taste 12). */
.fc13 .box-list { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 0; max-width: 900px; }
.fc13 .box-list li { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding: 14px 0; }
@media (max-width: 600px) { .fc13 .box-list { grid-template-columns: 1fr; } }
.fc13 .box-list svg { width: 22px; height: 22px; flex: none; color: var(--navy); }

/* ------------------------------------------------------------------------------------------------ FORGE Studio Included */
.fc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .fc-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ Buying for a Lab */
.fc-lab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: center; }
.fc-lab-go .btn { background: var(--surface); }
.fc-rules { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid var(--navy-100); font-size: var(--t-small); color: var(--ink-3); max-width: 80ch; }
@media (max-width: 760px) { .fc-lab { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ Answers */
.fc13 .faq { margin-top: 28px; }

@media (max-width: 720px) {
  .fc13 .gallery-main { padding: 12px; }
  .fc-canvas, .fc-dots { inset: 2% 0 4%; }
}
/* A phone's first screen holds the name, the price and Add to cart (S166 taste 10): a shorter 3D stage, and no photo
   strip (the 3D board turns to show every side) or breadcrumb above the name. */
@media (max-width: 960px) {
  .fc13 .gallery-main { aspect-ratio: 4 / 3; padding: 12px; }
  .fc13 .thumbs { display: none; }
  .fc13 .buybox .crumbs { display: none; }
  .fc13 .product { padding-top: 12px; gap: 20px; }
  .fc13 .gallery-main .fc-hint { font-size: 13px; }
  .fc13 .price-big { margin-top: 14px; }
  .fc13 .stock { margin-top: 8px; }
  .fc13 .buy-row { margin-top: 14px; }
}

/* S179: "Buy the flight controller" links land on the price, clear of the sticky header. */
#buybox { scroll-margin-top: calc(var(--header-h, 72px) + 12px); }