/* ==========================================================================
   Synergy Textile Group — Capabilities Page
   Design tokens extracted 1:1 from Figma reference "Capabilities Page.png"
   Shared tokens (colors, fonts, .container, .eyebrow, .btn, .section-heading)
   come from style.css — this file holds Capabilities-page-only sections.

   Note: on this page's reference every eyebrow pill uses a SQUARE dot
   (not the site-wide round default) — overridden below, scoped to this
   page's sections only, so about.html / products.html / index.html are
   unaffected.
   ========================================================================== */

.capabilities-hero .eyebrow__dot,
.core-capabilities .eyebrow__dot,
.production-capacity .eyebrow__dot,
.capabilities-brand-logos .eyebrow__dot,
.mfg-network .eyebrow__dot,
.contact .eyebrow__dot {
  border-radius: 2px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.capabilities-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 778px;
  background: var(--color-text);
}
.capabilities-hero__bg { position: absolute; inset: 0; }
.capabilities-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.capabilities-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.7) 100%);
}
.capabilities-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.capabilities-hero__eyebrow { align-self: center; margin: 0 auto; }
.capabilities-hero__title { max-width: 900px; }
.capabilities-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: 30px;
  color: rgba(255,255,255,.9);
  max-width: 640px;
  margin: 0;
}
.capabilities-hero .btn { align-self: center; margin: 10px auto 0; }

/* ==========================================================================
   CORE CAPABILITIES
   ========================================================================== */
.core-capabilities { background: var(--color-white); padding: 100px 0; }
.core-capabilities .eyebrow { margin-bottom: 30px; }
.core-capabilities__title { max-width: 620px; margin: 0 0 56px; }

.core-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}
.core-capability-card { display: flex; flex-direction: column; gap: 20px; }
.core-capability-card img {
  display: block;
  width: 100%;
  aspect-ratio: 448 / 252;
  object-fit: cover;
  border-radius: 8px;
}
.core-capability-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}
.core-capability-card p {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================================================
   PRODUCTION CAPACITY
   ========================================================================== */
.production-capacity { background: #f2f2f3; padding: 100px 0; }
.production-capacity__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  margin-bottom: 56px;
}
.production-capacity__head .eyebrow { align-self: center; }

.capacity-panel {
  background: var(--color-white);
  border: 1px solid var(--color-stroke);
  border-radius: 12px;
  overflow: hidden;
  /* Linked to from the homepage's capacity cards (#woven-capabilities /
     #knit-capabilities) -- offset so the panel isn't hidden under the
     fixed site header when the browser jumps straight to the anchor. */
  scroll-margin-top: 130px;
}
.capacity-panel + .capacity-panel { margin-top: 48px; }
.capacity-panel__title {
  margin: 0;
  padding: 28px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary-green);
  border-bottom: 1px solid var(--color-stroke);
}
.capacity-panel__body { padding: 40px; display: flex; flex-direction: column; gap: 24px; }

.capacity-grid { display: grid; gap: 24px; }
.capacity-grid--2 { grid-template-columns: repeat(2, 1fr); }
.capacity-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Renamed from "capacity-card" to "capacity-item": style.css has an
   unrelated, older ".capacity-card" component (the homepage's figure/
   caption cards, with its own fixed height, hidden overflow, and a
   hover overlay + zoom). Sharing that class name let those leak through
   here too -- first clipping the label/value row below each image, then
   (once that was patched) spilling the hover overlay across the meta
   text as well. Renaming removes the collision outright instead of
   chasing individual leaked properties. The zoom-on-hover below is this
   page's own, intentionally scoped to just the image via __frame's
   overflow: hidden so it never touches the label/value row. */
.capacity-item { display: flex; flex-direction: column; gap: 20px; }
.capacity-item__frame { overflow: hidden; border-radius: 8px; }
.capacity-item__frame img { display: block; width: 100%; object-fit: cover; transition: transform .5s ease; }
.capacity-item--lg .capacity-item__frame img { aspect-ratio: 623 / 333; }
.capacity-item--sm .capacity-item__frame img { aspect-ratio: 401 / 333; }
.capacity-item:hover .capacity-item__frame img { transform: scale(1.07); }
.capacity-item__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.capacity-item__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  color: var(--color-primary-green);
}
.capacity-item__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  color: var(--color-text);
}

/* ==========================================================================
   RETAIL & BRAND EXPOSURE
   (duplicated from about.css — same reused component/markup, kept here so
   this page doesn't depend on loading about.css)
   ========================================================================== */
.brand-logos { background: var(--color-white); padding: 100px 50px; }
.brand-logos .container { padding: 0; max-width: 1340px; }
.brand-logos__head { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-bottom: 72px; }
.brand-logos__heading-text { display: flex; flex-direction: column; gap: 16px; }
.brand-logos__heading-text h2 { white-space: nowrap; }
.brand-logos__heading-text p { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-text); margin: 0; }

.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-stroke);
  border-left: 1px solid var(--color-stroke);
}
.brand-logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px;
  padding: 24px;
  border-right: 1px solid var(--color-stroke);
  border-bottom: 1px solid var(--color-stroke);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .02em;
  text-align: center;
  overflow: hidden;
}
.brand-logo img { max-height: 36px; max-width: 170px; width: auto; height: auto; object-fit: contain; transition: transform .35s ease; }
.brand-logo--izod { font-family: 'Times New Roman', serif; letter-spacing: .18em; font-size: 20px; transition: transform .35s ease; }
.brand-logo:hover img { transform: scale(1.12); }
.brand-logo.brand-logo--izod:hover { transform: scale(1.12); }

/* ==========================================================================
   MANUFACTURING NETWORK
   ========================================================================== */
.mfg-network { background: #f2f2f3; padding: 100px 0; }
.mfg-network__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.mfg-network__text { display: flex; flex-direction: column; gap: 24px; max-width: 700px; }
.mfg-network__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  color: var(--color-text-secondary);
  margin: 0;
}
.mfg-network__stats { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; text-align: right; flex-shrink: 0; }
.mfg-network__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 8px;
}
.mfg-network__stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-14);
  color: var(--color-primary-green);
  margin: 0;
}
.mfg-network__photo { width: 100%; border-radius: 12px; overflow: hidden; aspect-ratio: 1340 / 450; }
.mfg-network__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .capabilities-hero { height: auto; min-height: 560px; padding: 60px 20px; }
  .capabilities-hero__title { font-size: 36px; line-height: 1.2; }

  .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); }

  .capacity-panel__body { padding: 24px; }
  .capacity-grid--2, .capacity-grid--3 { grid-template-columns: 1fr; }

  .brand-logo-grid { grid-template-columns: repeat(2, 1fr); }

  .mfg-network__head { flex-direction: column; }
  .mfg-network__stats { flex-direction: row; align-items: flex-start; text-align: left; width: 100%; justify-content: space-between; }
  .mfg-network__photo { aspect-ratio: auto; height: 320px; }
}

@media (max-width: 640px) {
  .core-capabilities-grid { grid-template-columns: 1fr; }
  .brand-logo-grid { grid-template-columns: 1fr; }
  .mfg-network__stats { flex-direction: column; gap: 16px; }
  /* This heading is editable (ACF) -- allow it to wrap on narrow screens
     instead of forcing a single nowrap line that could overflow. */
  .brand-logos__heading-text h2 { white-space: normal; }
}