/* ==========================================================================
   Pages: device support — /device-support/ and the ten /device-support/<device>/
   pages. Loaded after site.css by those pages only.
   ========================================================================== */

/* ---------- Gradient title band ----------
   <section class="device-hero"><h1 class="device-hero__title">…</h1></section> */
.device-hero {
  margin: -3px 0 50px;   /* the live band starts 3px under the header */
  padding: 75px 0;
  background: linear-gradient(176deg, var(--c-purple) 54%, var(--c-green) 100%);
}

/* Live has no side padding here (the title touches the screen edge below
   1141px); inset it 15px on the left until the 1140px container gives it
   room. Left only, so titles wrap onto the same number of lines as live. */
.device-hero__title {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 0 0 15px;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
  line-height: 30px;
  color: var(--c-white);
}

/* /device-support/: the live band also held a search box (removed); keep the
   band's height so the gradient and the page below stay where they were. */
.device-hero--index { padding-bottom: 160px; }
.device-hero--index .device-hero__title { padding: 0 15px 0 30px; }

@media (min-width: 768px) {
  .device-hero--index .device-hero__title { padding: 0 15px; }
}

@media (min-width: 1025px) {
  .device-hero--index .device-hero__title { padding: 0; }
}

@media (min-width: 1141px) {
  .device-hero__title { padding: 0; }
}

/* Section headings ("Select your hardware…", "Currently supported …") */
.device-heading {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 600;
  line-height: 28px;
  color: var(--c-text);
}

/* ---------- Logo / device tiles ----------
   <div class="tile-grid">
     <a class="tile tile--gopro" href="…"><img class="tile__img" …></a>
     <a class="tile tile--solodl2" href="#aim"><img class="tile__img" …><p class="tile__label">…</p></a>
   </div>
   Image width = --p × the smaller of its natural width (--n) and the tile's
   inner width less side margins (--mh); --mt / --mb are its top/bottom margins.
   The per-tile values come from the live pages. */
.tile-grid {
  display: grid;
  align-items: start;
  padding: 0 5px;
}

.tile {
  --p: 1;
  --n: 9999px;
  --mh: 10px;
  --mt: 20px;
  --mb: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  background: rgba(242, 245, 247, .29);
  color: var(--c-text);
}
a.tile:hover { color: var(--c-text); }

.tile__img {
  width: calc(var(--p) * min(var(--n), 100% - 2 * var(--mh)));
  margin: var(--mt) 0 var(--mb);
}

.tile__label {
  margin: -14px 0 14px;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  text-align: center;
}
.tile__label:last-child { margin-bottom: 14px; }

@media (min-width: 768px) {
  .tile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 20px;
    padding: 30px 10px 20px;
  }
  .tile { padding: 10px; }
}

/* ---------- /device-support/ index ---------- */
.device-index__title { padding: 30px 0 0 15px; }
.device-index__title--software { padding-top: 50px; }
.device-index .tile-grid { row-gap: 10px; padding: 20px 5px 10px; }

@media (min-width: 768px) {
  .device-index__title { padding-top: 40px; }
  .device-index__title--software { padding-top: 60px; }
  .device-index .tile-grid { row-gap: 40px; padding: 30px 10px 20px; }
}

/* Brand logos: phone values first, then tablet (--p only), then desktop */
.tile--gopro       { --n: 257px;  --p: .65; --mh: 0px;  --mt: 12px; --mb: 12px; }
.tile--garmin      { --n: 297px;  --p: .65; --mh: 0px;  --mt: 13px; --mb: 13px; }
.tile--racebox     { --n: 470px;  --p: .65; --mh: 0px;  --mt: 18px; --mb: 18px; }
.tile--motec       { --n: 258px;  --p: .65;             --mt: 15px; --mb: 15px; }
.tile--link        { --n: 195px;  --p: .70; --mh: 0px;  --mt: 7px;  --mb: 8px; }
.tile--alfano      { --n: 260px;  --p: .65; }
.tile--vbox        { --n: 236px;  --p: .65;             --mt: 18px; --mb: 18px; }
.tile--dualskypro  { --n: 80px;   --p: .77;             --mt: 5px;  --mb: 5px; }
.tile--aim         { --n: 1006px; --p: .55; --mh: 0px;  --mt: 10px; --mb: 10px; }
.tile--racechrono  { --n: 399px;                        --mt: 23px; --mb: 23px; }
.tile--trackaddict { --n: 80px;   --p: .85;             --mt: 5px;  --mb: 6px; }

@media (min-width: 768px) {
  .tile--gopro       { --p: .90; }
  .tile--garmin,
  .tile--racebox,
  .tile--link        { --p: 1; }
  .tile--motec       { --p: .88; }
  .tile--alfano      { --p: .79; }
  .tile--vbox        { --p: .91; }
  .tile--aim         { --p: .85; }
  .tile--trackaddict { --p: .78; }
}

@media (min-width: 1025px) {
  .tile--gopro       { --p: .70; --mh: 10px; --mt: 20px; --mb: 20px; }
  .tile--garmin      { --p: .83; --mh: 10px; --mt: 20px; --mb: 20px; }
  .tile--racebox     { --p: .92; --mh: 10px; --mt: 28px; --mb: 27px; }
  .tile--motec       { --p: .88; }
  .tile--link        { --mh: 10px; --mt: 5px; --mb: 5px; }
  .tile--alfano      { --p: .73; }
  .tile--vbox        { --p: .72; }
  .tile--dualskypro  { --p: 1; }
  .tile--aim         { --mh: 10px; --mt: 5px; --mb: 5px; }
  .tile--trackaddict { --p: 1; }
}

/* Device photos on the device pages (same at every width) */
.tile--solodl2    { --p: .57; }
.tile--mychron    { --p: .69; }
.tile--alfano6    { --p: .60; }
.tile--xgps160    { --p: .51; }
.tile--glo2       { --p: .63; }
.tile--gopro-hero { --p: .63; }
.tile--gopro-max  { --p: .45; --n: 220px; }
.tile--gopro-fusion { --p: .36; --mt: 28px; --mb: 27px; }
.tile--voodoo     { --p: .52; }
.tile--motec-dash { --p: .57; }
.tile--motec-ecu  { --p: .67; }
.tile--rb-mini    { --p: .51; }
.tile--rb-mini-s  { --p: .64; }

/* ---------- Device page: "Currently supported … devices" ---------- */
.device-intro__text { margin: -2px 0 0; }
.device-intro__text p { margin-bottom: 14px; }

@media (min-width: 768px) {
  .device-intro { padding-top: 10px; }
}

/* ---------- Device page: guide section (text, toggles, video) ---------- */
.device-guide {
  margin-top: 75px;
  padding-top: 59px;
}
.device-guide > .container > * + * { margin-top: 20px; }

@media (min-width: 768px) {
  .device-guide { padding: 69px 0 10px; }
}

.device-guide__title {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 600;
  line-height: 30px;
  color: var(--c-text);
}

.device-guide__text { display: flow-root; }  /* keep the last p's margin inside */
.device-guide__text p,
.device-guide__text p:last-child { margin: 0 0 14.4px; }

.device-guide > .container > .device-guide__video-title {
  margin-top: 45px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  color: var(--c-text);
}

@media (min-width: 768px) {
  .device-guide > .container > .device-guide__video-title { font-size: 16px; line-height: 16px; }
}

.device-guide__video { aspect-ratio: 16 / 9; background: #000; }
.device-guide__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Toggle variant of the shared .faq accordion */
.faq--guide .faq__q {
  gap: 0;
  padding: 25px 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
}
.faq--guide .faq__icon {
  width: 20px;
  height: 20px;
  margin: 0 5px 0 -5px;   /* the live icon reserves 20px at the right edge */
}
.faq--guide .faq__a { padding: 15px; }
.faq--guide .faq__a p,
.faq--guide .faq__a p:last-child { margin: 0 0 14.4px; }
.faq--guide .faq__a ul,
.faq--guide .faq__a ol { margin: 0; padding-left: 40px; }