/* ============================================================================
   TEXTILES — the sections built from the Textiles deck
   Loaded after sector-detail.css, only by sector-textiles.html.

   Everything here is scoped to .sd--tex or prefixed .tx-, so nothing leaks
   into the twelve other sector pages that share sector-detail.css.

   01  Tokens
   02  The textile advantage — six columns on a blurred gradient field
   03  Responsive
   ========================================================================= */

.sd--tex{
  /* off the page's own accent and the logo palette — nothing new invented */
  --tx-accent:#0425B9;
  --tx-blue:#0483CE;
  --tx-navy:#0024B4;
  --tx-green:#007028;
  --tx-gold:#E0A800;
  --tx-ink:#0A0C2B;
  --tx-gap:clamp(4rem,8vw,9rem);
}

/* 02 ── THE TEXTILE ADVANTAGE ─────────────────────────────────────────── */
/* A blurred gradient field with six glass columns standing on it. The field
   is three large blobs behind a blur, not an image, so it costs one paint
   and scales to any width. */

.tx-adv{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--tx-gap);
  background:var(--paper);
}

/* ---- the field ------------------------------------------------------- */
.tx-adv__field{
  position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;
  filter:blur(130px) saturate(92%);
  opacity:.15;
  /* the pointer nudges the whole field a few pixels; the JS writes --fx/--fy */
  translate:var(--fx,0px) var(--fy,0px);
  transition:translate 1.1s var(--e-out);
  will-change:transform;
}
.tx-adv__field i{
  position:absolute;display:block;border-radius:50%;
}
.tx-adv__field i:nth-child(1){
  left:-4%;top:-8%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,var(--tx-accent),transparent 68%);
}
.tx-adv__field i:nth-child(2){
  right:-6%;top:6%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,var(--tx-blue),transparent 66%);
}
.tx-adv__field i:nth-child(3){
  left:26%;bottom:-24%;width:54%;aspect-ratio:1;
  background:radial-gradient(circle,var(--tx-green),transparent 70%);
}
/* a fine grain over the blur, so the gradient does not band on wide screens */
.tx-adv__grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
/* the hairline grid the columns stand on */
.tx-adv__rule{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(10,12,43,.05) 1px,transparent 1px);
  background-size:calc(100% / 5) 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
}

.tx-adv__in{position:relative;z-index:1}

/* ---- the head -------------------------------------------------------- */
.tx-adv__hd{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:end;
  margin-bottom:clamp(2.4rem,5vw,4rem);
}
.tx-adv__h{
  margin:0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.045em;color:var(--ink);
}
.tx-adv__h em{
  font-style:normal;
  background:linear-gradient(96deg,var(--tx-accent),var(--tx-navy) 54%,var(--tx-green));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.tx-adv__note{
  margin:0;font-size:.92rem;line-height:1.66;color:var(--ink-3);max-width:44ch;
}

/* ---- the six columns ------------------------------------------------- */
.tx-cols{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none;
  border-radius:var(--r-lg);
  /* one glass sheet, divided — not six separate cards */
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 2px rgba(10,12,43,.04),0 30px 70px rgba(10,12,43,.10);
  overflow:hidden;
}
.tx-col{
  position:relative;
  display:grid;gap:.95rem;align-content:start;
  padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1rem,1.8vw,1.5rem) clamp(1.7rem,3vw,2.4rem);
  transition:background .5s var(--e-out);
}
.tx-col + .tx-col{box-shadow:inset 1px 0 0 rgba(10,12,43,.07)}
.tx-col:hover{background:rgba(255,255,255,.55)}

/* The icon stands on its own — no plate. The artwork is masked so it takes
   the column's colour; the <img> inside is what a browser without mask
   support falls back to, and what a screen reader reads either way. */
.tx-col__ic{
  display:block;width:clamp(42px,3.4vw,52px);aspect-ratio:1;
  background:var(--cc);
  /* the artwork is named per column below, relative to this file */
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  transition:transform .5s var(--e-spring),opacity .45s var(--e-out);
}
.tx-col__ic--cotton{
  -webkit-mask-image:url(../img/sectors/textiles/icons/cotton.png);
  mask-image:url(../img/sectors/textiles/icons/cotton.png);
}
.tx-col__ic--textile-park{
  -webkit-mask-image:url(../img/sectors/textiles/icons/textile-park.png);
  mask-image:url(../img/sectors/textiles/icons/textile-park.png);
}
.tx-col__ic--cluster-network{
  -webkit-mask-image:url(../img/sectors/textiles/icons/cluster-network.png);
  mask-image:url(../img/sectors/textiles/icons/cluster-network.png);
}
.tx-col__ic--garment-machine{
  -webkit-mask-image:url(../img/sectors/textiles/icons/garment-machine.png);
  mask-image:url(../img/sectors/textiles/icons/garment-machine.png);
}
.tx-col__ic--workforce{
  -webkit-mask-image:url(../img/sectors/textiles/icons/workforce.png);
  mask-image:url(../img/sectors/textiles/icons/workforce.png);
}
.tx-col__ic img{width:100%;height:100%;object-fit:contain;object-position:left center}
/* the mask hides the fallback wherever it is honoured */
@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
  .tx-col__ic img{opacity:0}
}
.tx-col:hover .tx-col__ic{transform:translateY(-3px) scale(1.04)}
/* the rule under the icon draws out as the column arrives */
.tx-col__line{
  display:block;height:1px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--cc),color-mix(in srgb,var(--cc) 12%,transparent));
  transform:scaleX(var(--draw,1));transform-origin:left;
}
.tx-col__t{
  margin:0;font-family:var(--f-head);font-weight:400;
  font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.34;letter-spacing:-.02em;color:var(--ink);
}
/* the figures inside a line pick up the column's colour */
.tx-col__t b{font-weight:700;color:var(--cc)}

/* 03 ── RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width:1180px){
  .tx-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tx-col:nth-child(3n+1){box-shadow:none}
  .tx-col:nth-child(n+4){box-shadow:inset 0 1px 0 rgba(10,12,43,.07)}
  .tx-col:nth-child(n+4):not(:nth-child(3n+1)){
    box-shadow:inset 1px 0 0 rgba(10,12,43,.07),inset 0 1px 0 rgba(10,12,43,.07);
  }
  .tx-adv__rule{background-size:calc(100% / 3) 100%}
}
@media (max-width:860px){
  .tx-adv__hd{grid-template-columns:minmax(0,1fr);align-items:start}
  .tx-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tx-col:nth-child(3n+1){box-shadow:inset 1px 0 0 rgba(10,12,43,.07)}
  .tx-col:nth-child(odd){box-shadow:none}
  .tx-col:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(10,12,43,.07)}
  .tx-col:nth-child(n+3):not(:nth-child(odd)){
    box-shadow:inset 1px 0 0 rgba(10,12,43,.07),inset 0 1px 0 rgba(10,12,43,.07);
  }
  .tx-adv__rule{background-size:50% 100%}
}
@media (max-width:560px){
  /* the phone gets a list, not a squeezed grid: the icon sits beside the
     line rather than above it, which halves the height of the block */
  .tx-cols{grid-template-columns:minmax(0,1fr)}
  .tx-col{
    grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:.5rem 1rem;padding:1.1rem 1.1rem 1.25rem;
  }
  .tx-col__ic{grid-row:span 2}
  .tx-col__line{width:42px}
  .tx-col:nth-child(n+1){box-shadow:none}
  .tx-col + .tx-col{box-shadow:inset 0 1px 0 rgba(10,12,43,.07)}
  .tx-adv__rule{display:none}
  .tx-adv__field{filter:blur(80px) saturate(92%)}
}

/* the field is decoration; a reader who asked for stillness keeps it still */
html.no-motion .tx-adv__field{translate:none !important}
html.no-motion .tx-col__line{transform:none !important}