/* page-sportswear.css
   Body styles for the Sportswear landing page. The hero (top band with grid
   background + bottom border + heading) is reused from page-blog.css; this
   file handles the content sections below the hero.

   Layout model: every section is a FULL-WIDTH band. The section element runs
   edge-to-edge (so its background spans the full content width) while an inner
   wrapper constrains and centres the content. */

/* ---- Full-width section bands ---- */
.sportswear-section {
  margin: 0;
  padding: 64px 0;
  font-family: "Outfit", sans-serif;
  color: var(--brand-grey-900);
}
.sportswear-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Featured products uses the same content width as the Browse Catalogue.
   Browse's gallery sits in a 1140px content area; the +48px offsets this
   section's 24px side padding so the gallery itself lands at 1140px. */
.sportswear-section__inner--wide {
  max-width: 1188px;
}
/* Tinted full-width band. */
.sportswear-section--tint {
  background: var(--e-global-color-e7ef6e7, #F7F7F7);
}
/* Hairline separators between bands. */
.sportswear-section--border-top { border-top: 1px solid rgba(0, 29, 28, 0.12); }
.sportswear-section--border-bottom { border-bottom: 1px solid rgba(0, 29, 28, 0.12); }

.sportswear-section__title {
  font-family: "Anton", sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--brand-primary);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

.sportswear-section__lead {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--brand-grey-900);
}

.sportswear-section p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}

/* Content links (text links) keep the brand colour + underline. */
.sportswear-section a,
.sportswear-section a:link,
.sportswear-section a:visited {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sportswear-section a:hover,
.sportswear-section a:focus,
.sportswear-section a:active {
  color: var(--brand-primary) !important;
}

/* ---- Fabrics & performance card grid ---- */
.sportswear-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.sportswear-card {
  border: 1px solid rgba(0, 29, 28, 0.15);
  border-radius: 12px;
  padding: 22px 24px;
  background: #FFFFFF;
}
/* Icon sits above the card title (one performance point per card). */
.sportswear-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-secondary, #D1ED77);
  color: var(--brand-primary, #001D1C);
  margin-bottom: 14px;
}
.sportswear-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.sportswear-card__title {
  font-family: "Anton", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: var(--brand-primary);
}
.sportswear-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--brand-grey-900);
}

/* ---- Final CTA: a contained block/card sitting inside a full-width white
   section (the section background runs full width; the card keeps its
   original off-white, bordered, rounded look). ---- */
.sportswear-cta {
  background: var(--e-global-color-e7ef6e7, #F7F7F7);
  border: 1px solid var(--brand-primary, #001D1C);
  border-radius: 12px;
  padding: 40px;
}
.sportswear-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: 18px 0 0;
}
.sportswear-btn {
  display: inline-flex;
  align-items: center;
  background: var(--brand-primary, #001D1C);
  color: var(--brand-secondary, #D1ED77) !important;
  text-decoration: none !important;
  padding: 12px 22px;
  border-radius: 100px;
}
/* Match the Subscribe button's font + size exactly (Outfit 13px / 500). */
.sportswear-section a.sportswear-btn {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.sportswear-section .sportswear-btn,
.sportswear-section .sportswear-btn:link,
.sportswear-section .sportswear-btn:visited {
  color: var(--brand-secondary) !important;
  text-decoration: none !important;
}
/* Text turns white on hover. */
.sportswear-section a.sportswear-btn:hover,
.sportswear-section a.sportswear-btn:focus,
.sportswear-section a.sportswear-btn:active {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.sportswear-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-primary) !important;
}

/* ---- Text-link hover behaviours ---- */
/* Arrow CTA links ("See The Full…", "Browse The Catalogue"): keep the
   underline on the text, with an arrow pseudo-element that slides right on
   hover. The arrow is inline-block so the underline doesn't run under it. */
.sportswear-section .sportswear-products__more a,
.sportswear-section a.sportswear-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sportswear-section .sportswear-products__more a::after,
.sportswear-section a.sportswear-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.sportswear-section .sportswear-products__more a:hover::after,
.sportswear-section .sportswear-products__more a:focus-visible::after,
.sportswear-section a.sportswear-link:hover::after,
.sportswear-section a.sportswear-link:focus-visible::after {
  transform: translateX(5px);
}
/* Inline content links (e.g. "product catalogue"): underline thickens and
   drops slightly on hover. */
.sportswear-feature__copy a {
  transition: text-underline-offset 0.2s ease, text-decoration-thickness 0.2s ease;
}
.sportswear-feature__copy a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- Eyebrow text above section title ---- */
.sportswear-eyebrow {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-secondary);
  border: 1px solid #AFC95A;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ---- Two-column feature: image + copy ---- */
.sportswear-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}
.sportswear-feature__media {
  border-radius: 14px;
  overflow: hidden;
  background: var(--e-global-color-e7ef6e7, #F7F7F7);
  border: 1px solid rgba(0, 29, 28, 0.08);
}
.sportswear-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 4 / 3;
}
.sportswear-feature__copy h2 { margin-top: 0; }

/* ---- Featured product gallery: mirrors the Browse Catalogue gallery ----
   5 per row on desktop, 3 on tablet, 2 on mobile; 4:5 portrait ratio with
   object-fit cover; 8px rounded images; card-style caption below each image. */
.sw-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px 4px;
  margin-top: 8px;
}
.sw-gallery__item {
  display: block;
  text-decoration: none !important;
  cursor: default;            /* keep the default arrow; no pointer/zoom change */
}
.sw-gallery__thumb {
  position: relative;
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  border-radius: 8px;
  background: var(--e-global-color-e7ef6e7, #F7F7F7);
}
.sw-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.sw-gallery__caption {
  background-color: #FDFDFD;
  padding: 0 8px 2px;
  text-align: left;
}
/* Higher specificity (.sw-gallery .sw-gallery__title) so the caption font wins
   over the Elementor kit's `.elementor-kit-xxxx h3` heading rule and matches
   the Browse Catalogue caption exactly (Anton 16/400). */
.sw-gallery .sw-gallery__title {
  font-family: "Anton", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0.2px;
  color: var(--brand-primary);
  margin: 6px 0 0;
}
/* Extra breathing room so the catalogue link is not glued to the gallery.
   Higher specificity than `.sportswear-section p` so the top margin applies. */
.sportswear-section .sportswear-products__more {
  text-align: center;
  margin: 40px 0 0;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .sw-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .sportswear-feature { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .sw-gallery { grid-template-columns: repeat(2, 1fr); }
  .sportswear-section { padding: 48px 0; }
  .sportswear-section__inner,
  .sportswear-section__inner--wide { padding: 0 20px; }
  .sportswear-section__title { font-size: 26px; }
  .sportswear-grid { grid-template-columns: 1fr; gap: 14px; }
}