/* ITF Business - What I Recommend
   Product card styles. Layers on top of help.css, which supplies the nav,
   hero, breadcrumbs, category grid, CTA and footer so these pages match
   the Tech Help Center exactly. */

/* help.css centers .help-hero p with auto side margins, which leaves the
   sub-heading floating in the middle of a left-aligned category hero.
   Only corrected here so the Help Center is left as it is. */
.help-hero.rec-hero p { margin-left: 0; margin-right: 0; max-width: 640px; }

/* ── How to pick block ── */
.rec-howto {
  max-width: 760px;
  margin: 0 0 2rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--gray-600);
  border-left: 3px solid var(--brass);
  padding-left: 1.1rem;
}
.rec-howto strong { color: var(--navy); }

/* ── Intro paragraph on the hub ── */
.rec-note {
  max-width: 1200px;
  margin: 0 auto 2rem;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.rec-note a { color: var(--blue); font-weight: 600; }

/* ── Product grid ── */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.rec-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rec-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(30,78,122,.10);
  transform: translateY(-2px);
}

.rec-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.5rem 1.5rem;
}

/* ── Product image ──
   Drop a photo in /images/recommends/ and register it in the generator.
   Until then the tile shows the category initial, which reads as a design
   choice rather than a missing image. Amazon's own product photos may not
   be copied without Product Advertising API access. */
.rec-img {
  height: 170px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rec-img img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }

.rec-img-empty {
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--gray-100) 100%);
}
.rec-img-empty span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--blue-accent);
  opacity: .55;
  line-height: 1;
}

/* ── Isaac's rating ──
   His own score, not Amazon's. Amazon star ratings and review counts may
   only be displayed via their API. The filled overlay is clipped by width,
   which gives real half stars without a half-star glyph. */
.rec-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .7rem;
}
.rec-stars {
  position: relative;
  display: inline-block;
  font-size: .95rem;
  letter-spacing: 1px;
  color: var(--gray-300);
  flex: none;
}
.rec-stars::before { content: "\2605\2605\2605\2605\2605"; }
.rec-stars::after {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fill, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--brass);
}
.rec-rating-label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-400);
  text-transform: uppercase;
}

.rec-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.12rem;
  color: var(--navy);
  margin: 0 0 .5rem;
  line-height: 1.3;
}

.rec-why {
  flex: 1;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
}

/* ── Specs ──
   Plain product facts, which carry no Amazon API restriction the way price,
   images and star ratings do. Never put anything volatile in here. */
.rec-specs {
  margin: 1rem 0 0;
  border-top: 1px solid var(--gray-200);
  padding-top: .85rem;
}
.rec-specs-head {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: .5rem;
}
.rec-specs dl { margin: 0; }
.rec-specs dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px dotted var(--gray-200);
}
.rec-specs dl > div:last-child { border-bottom: 0; }
.rec-specs dt {
  font-size: .8rem;
  color: var(--gray-400);
  flex: none;
}
.rec-specs dd {
  font-size: .8rem;
  color: var(--gray-800);
  font-weight: 500;
  margin: 0;
  text-align: right;
}

.rec-buy {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1.1rem;
  background: var(--brass);
  color: #1B2733;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
}
.rec-buy:hover { background: #C87D28; transform: translateY(-1px); }
.rec-buy:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.rec-pick {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: .4rem;
}

/* Price tier badge. Rough cost without printing a number, which Amazon
   forbids outside of their product API. <b> wraps the filled signs. */
.rec-tier {
  float: right;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gray-300);
  margin-left: .75rem;
}
.rec-tier b { color: var(--brass-text); font-weight: 700; }

/* ── Affiliate disclosure ── */
.rec-disclosure {
  max-width: 1200px;
  margin: 0 auto 1.75rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--gray-600);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: .85rem 1.1rem;
}

@media (max-width: 600px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-body { padding: 1.15rem 1.25rem 1.35rem; }
  .rec-img { height: 150px; }
}

/* ── SCROLL REVEALS ──
   Same timing, easing and stagger as the homepage in index.html, so these
   pages feel like part of the same site. Deliberately subtle: a meaningful
   share of visitors here are older, and motion that reads as "this page is
   broken" works against the whole point of the business. */
.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-fade.stagger-1 { transition-delay: 0.06s; }
.scroll-fade.stagger-2 { transition-delay: 0.12s; }
.scroll-fade.stagger-3 { transition-delay: 0.18s; }
.scroll-fade.stagger-4 { transition-delay: 0.24s; }
.scroll-fade.stagger-5 { transition-delay: 0.30s; }
.scroll-fade.stagger-6 { transition-delay: 0.36s; }

/* Product tile artwork. An outline icon per category rather than a letter,
   so a card with no photo yet reads as a design choice instead of a gap. */
.rec-img-empty svg {
  width: 62px;
  height: 62px;
  stroke: var(--blue-accent);
  opacity: .6;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade { transition: none; opacity: 1; transform: none; }
  .rec-card:hover { transform: none; }
}