/* ============================================================
   UNITED CONSTRUCTION — WORK FIELDS PAGE
   fields.css
   ------------------------------------------------------------
   1. Hero band
   2. Field rows (01–04, image grid + copy)
   3. Responsive
   ============================================================ */


/* ============================================================
   1. HERO BAND
   ------------------------------------------------------------
   Same shell as the project pages' .proj-hero, with its own
   background photo standing in for the plaza artwork.
   ============================================================ */
.fl-hero{
  position:relative;
  overflow:hidden;
}
.fl-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/fields/background.jpeg") center 38% / cover no-repeat;
}
.fl-hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,
      rgba(18,15,11,.72) 0%,
      rgba(20,16,12,.6) 46%,
      rgba(23,19,14,.86) 100%);
}
.fl-hero-inner{
  position:relative;
  z-index:2;
}
.fl-hero .proj-back,
.fl-hero .proj-cat,
.fl-hero .pa-title,
.fl-hero .proj-lede{
  color:#F5F1E6;
}
.fl-hero .proj-back{ color:rgba(245,241,230,.78); }
.fl-hero .proj-back:hover{ color:var(--gold-300); }
.fl-hero .proj-cat{ color:var(--gold-300); }
.fl-hero .proj-lede{ color:rgba(238,232,220,.82); }
.fl-hero .proj-rule{ background:var(--gold-grad); }

/* Ported from projects-all.css (that stylesheet isn't loaded on this
   page) — the hero copy block and its oversized title, unchanged. */
.fl-hero{ padding-block:clamp(1.2rem,2.4vw,2rem) clamp(1.8rem,3.6vw,2.8rem); }
.pa-hero-copy{
  max-width:820px;
  margin-top:clamp(1.6rem,3.2vw,2.6rem);
}
.pa-title{
  font-family:var(--font-ar);
  font-weight:800;
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.15;
  margin-bottom:1.1rem;
}
.fl-hero .pa-title{ color:#F5F1E6; }
.pa-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-300),var(--gold-500) 60%,var(--gold-300));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pa-hero-copy .proj-rule{ margin-block:1rem 1.3rem; }
.pa-hero-copy .proj-lede{ max-width:640px; }


/* ============================================================
   2. FIELD ROWS
   ============================================================ */
.fl-rows{
  display:grid;
  gap:clamp(2.2rem,4vw,3.2rem);
}

.fl-row{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:clamp(1.4rem,2.6vw,2.4rem);
  align-items:start;
  padding:clamp(1.4rem,2.4vw,2rem);
  background:linear-gradient(180deg,#FFFDF9 0%,#FAF6EE 100%);
  border:1px solid rgba(207,166,72,.18);
  box-shadow:0 30px 60px -38px rgba(46,34,12,.4);
}

/* --- copy column --- */
.fl-row-copy{ display:grid; align-content:start; gap:.5rem; }
.fl-num{
  font-family:var(--font-en);
  font-size:clamp(2.2rem,3.4vw,3rem);
  font-weight:400;
  line-height:1;
  color:var(--gold-500);
  -webkit-text-stroke:1px var(--gold-700);
}
.fl-title{
  margin-top:.3rem;
  font-family:var(--font-ar);
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1.35;
  color:var(--ink-900);
}
.fl-title-en{
  font-family:var(--font-en);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--gold-700);
}
.fl-desc{
  margin-top:.4rem;
  font-family:var(--font-ar-alt);
  font-size:.9rem;
  line-height:1.85;
  color:var(--ink-500);
  max-width:32ch;
}
.fl-more{
  margin-top:.8rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-ar);
  font-size:.84rem;
  color:var(--gold-900);
  transition:gap var(--t-btn) var(--ease-btn), color var(--t-btn) var(--ease-btn);
}
.fl-more svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  transform:scaleX(-1);   /* RTL: point back toward the row's start */
}
html[dir="ltr"] .fl-more svg{ transform:none; }
.fl-more:hover{ gap:.75rem; color:var(--gold-700); }

/* --- image grid: one large shot + four small ones beside it --- */
.fl-gallery{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(.5rem,1vw,.85rem);
}
.fl-shot{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:var(--cream-200);
}
.fl-shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.15s var(--ease-cine);
}
.fl-shot:hover img{ transform:scale(1.08); }

.fl-shot--main{ grid-row:1 / 3; grid-column:1; aspect-ratio:auto; }
.fl-shot--main img{ aspect-ratio:4/3; }
.fl-gallery .fl-shot:not(.fl-shot--main){ aspect-ratio:4/3; }


/* ============================================================
   3. RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .fl-row{ grid-template-columns:1fr; }
  .fl-row-copy{ order:1; }
  .fl-gallery{ order:2; }
}

@media (max-width:640px){
  .fl-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
  }
  .fl-shot--main{ grid-row:1; grid-column:1 / 3; }
  .fl-shot--main img{ aspect-ratio:16/10; }
  .fl-row{ padding:1.1rem; }
  .fl-desc{ max-width:none; }
}