/* ==========================================================================
   Core Music — practice gear page
   A bento grid of Amazon products: mixed tile sizes on one grid, each tile a
   photo, a title, a line of copy and an affiliate link out to Amazon. The
   tiles themselves are built by gear.js from its PRODUCTS array.
   Loads after shared.css.
   ========================================================================== */

/* Same travel distance as the apps and support pages. */
@keyframes om-drift-a { from { transform: translateY(-70px); } to { transform: translateY(70px); } }

.glow--gear {
  top: -260px;
  left: 50%;
  width: 1000px;
  height: 820px;
  margin-left: -500px;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 62%);
  filter: blur(20px);
  animation-name: om-drift-a;
  --drift-from: -70px;
  --drift-to: 70px;
}

/* Border-box to match `.apps-main` / `.support-main`: the 1240px cap includes
   the 40px gutters (see the README — the project is content-box by default). */
.gear-main {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 130px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

/* No max-width: the headline is the widest thing here and holds one line
   (the disclosure carries its own cap). */
.gear-intro { padding: 96px 0 52px; }


/* One line at every width. The text measures ~13.5x its own font size and the
   column is the viewport less the 40px gutters, so 5.4vw keeps it inside with
   room to spare; the 68px cap takes over around 1260px. Rewording the headline
   means re-checking that factor. */
.gear-intro__title {
  margin: 0;
  font-size: min(68px, 5.4vw);
  line-height: 1.06;
  font-weight: 300;
  letter-spacing: -0.045em;
  white-space: nowrap;
  animation: om-rise .9s cubic-bezier(.16, 1, .3, 1) .08s both;
}
.gear-intro__title strong { font-weight: 600; }


/* Affiliate disclosure. Kept in the intro rather than the footer so it is
   above the first tile, which is what the FTC guidance and Amazon's own
   operating agreement both ask for. */
.gear-intro__note {
  box-sizing: border-box;
  margin: 28px 0 0;
  padding: 13px 16px;
  max-width: 600px;
  border: 1px solid #1c1c20;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 300;
  color: #6f6f78;
  text-wrap: pretty;
  animation: om-rise .9s cubic-bezier(.16, 1, .3, 1) .16s both;
}

/* --------------------------------------------------------------------------
   Section head — title left, item count right
   -------------------------------------------------------------------------- */

.gear-section + .gear-section { padding-top: 54px; }

.gear-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 20px;
}

.gear-section__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fafafa;
}

.gear-section__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #52525b;
}

/* --------------------------------------------------------------------------
   Bento grid

   One grid per section. Cells are `--row` tall and tiles claim whole numbers
   of them, so the sizes tile against each other: a standard tile is 1 x 2, a
   wide tile 2 x 2 and a feature 2 x 4 — one feature sits exactly beside two
   stacked pairs of standard tiles. `dense` backfills the holes a mixed run
   leaves behind, so the grid stays packed however many products the array
   ends up holding.
   -------------------------------------------------------------------------- */

.gear-grid {
  /* Cell height is set so that tile minus body leaves an art box of roughly
     7:6 — near enough to the square-ish framing product shots come in that a
     photo fills it edge to edge instead of floating in letterbox bars. */
  --row: 170px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--row);
  grid-auto-flow: dense;
  gap: 18px;
}

.gear-tile { grid-column: span 1; grid-row: span 2; min-width: 0; }
.gear-tile--wide { grid-column: span 2; }
.gear-tile--feature { grid-column: span 2; grid-row: span 4; }

/* The card itself. The reveal lives on the tile and the lift on this link —
   `[data-reveal]` fills `transform`, so sharing a node would kill the lift. */
.gear-tile__link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #141416, #0f0f11);
  border: 1px solid #1f1f23;
  color: #fafafa;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1),
              border-color .22s ease,
              box-shadow .22s ease;
}
.gear-tile__link:hover {
  transform: translateY(-3px);
  border-color: #2e2e33;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.95);
  color: #fafafa;
}
.gear-tile__link:focus-visible {
  outline: 1px solid #52525b;
  outline-offset: 3px;
}

/* Art takes whatever height the body leaves, so tiles of different row spans
   share one body height and differ only in how much photo they show. */
.gear-tile__art {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #1c1c20;
  background: radial-gradient(72% 72% at 50% 42%, #191a1e 0%, #101012 62%, #0d0d0f 100%);
}

/* `contain`, not `cover`: Amazon product shots are framed with the product
   whole, and cropping one to fill the tile is how a pad loses its rim. */
.gear-tile__photo {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  display: block;
}

/* Drawn stand-in for an unfilled slot. */
.gear-tile__pad {
  width: 56%;
  max-width: 180px;
  height: auto;
  opacity: .95;
}
.gear-tile--feature .gear-tile__pad { width: 42%; max-width: 260px; }

/* Sits where a video platform puts its duration chip. */
.gear-tile__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(10, 10, 11, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: #a1a1aa;
}

.gear-tile__body {
  box-sizing: border-box;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 17px 17px;
}

.gear-tile__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fafafa;
}

.gear-tile__desc {
  font-size: 12.75px;
  line-height: 1.55;
  font-weight: 300;
  color: #71717a;
  text-wrap: pretty;
  /* Two lines on a standard tile keeps every body the same height, so the
     art strips line up across a row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gear-tile__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #6f6f78;
  transition: color .18s ease;
}
.gear-tile__link:hover .gear-tile__cta { color: #fafafa; }
.gear-tile__cta svg { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.gear-tile__link:hover .gear-tile__cta svg { transform: translateX(3px); }

/* Feature tile carries the section's largest type. */
.gear-tile--feature .gear-tile__body { gap: 10px; padding: 22px 26px 26px; }
.gear-tile--feature .gear-tile__title { font-size: 24px; letter-spacing: -0.03em; }
.gear-tile--feature .gear-tile__desc {
  font-size: 14px;
  max-width: 440px;
  -webkit-line-clamp: 3;
}

/* A slot with no photo or no name yet — dimmed so it reads as unfilled. */
.gear-tile.is-blank .gear-tile__title { color: #a1a1aa; }
.gear-tile.is-blank .gear-tile__desc { color: #52525b; }

/* --------------------------------------------------------------------------
   Closing row — same shape as the apps page's "more apps" row
   -------------------------------------------------------------------------- */

.gear-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 54px;
  padding: 30px 0;
  border-top: 1px solid #1f1f23;
  border-bottom: 1px solid #1f1f23;
}

.gear-more__text { font-size: 15px; font-weight: 300; color: #6f6f78; }

.gear-more__link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #8e8e96;
  transition: color .18s ease;
}
.gear-more__link:hover { color: #fafafa; }

/* Photo credit. Sits under the closing row, quiet but present — CC BY-SA is
   only satisfied if the credit actually ships with the page. */
.gear-credit {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: #52525b;
}
.gear-credit a { color: #6f6f78; border-bottom: 1px solid #2e2e33; }
.gear-credit a:hover { color: #a1a1aa; border-bottom-color: #52525b; }

.gear-noscript {
  margin: 0;
  padding: 22px;
  border: 1px solid #1f1f23;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 300;
  color: #8e8e96;
}

/* --------------------------------------------------------------------------
   Responsive — the grid drops a column at a time; the feature tile keeps its
   2-column footprint until there are only two columns left to give it.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .gear-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .gear-grid { grid-template-columns: repeat(2, 1fr); --row: 158px; }
  .gear-tile--feature .gear-tile__title { font-size: 21px; }
}

@media (max-width: 560px) {
  .gear-grid { grid-template-columns: 1fr; --row: 152px; }
  /* Spans wider than the grid would spawn implicit columns, so reset them. */
  .gear-tile,
  .gear-tile--wide,
  .gear-tile--feature { grid-column: span 1; grid-row: span 2; }
  .gear-tile--feature .gear-tile__body { padding: 15px 17px 17px; gap: 7px; }
  .gear-tile--feature .gear-tile__title { font-size: 17px; }
  .gear-tile--feature .gear-tile__desc { font-size: 12.75px; -webkit-line-clamp: 2; }
  .gear-tile--feature .gear-tile__pad { width: 56%; max-width: 180px; }
}