/**
 * File:          assets/css/sections.css
 * Version:       0.1.0
 * Last Modified: 2026-08-11
 * Changes:       Hero, services, work grid, approach and contact acts.
 */

/* --- Hero ----------------------------------------------------------------- */
/* The only act with no panel behind it: the field is at its clearest here, and
   the headline sits directly on the nebula. It is also the only place text
   relies on the vignette rather than a scrim, which is why the type is large,
   heavy and pure white. */

.hero__inner { width: 100%; }
.hero__title { max-width: 16ch; margin-bottom: var(--s4); text-shadow: 0 0 60px var(--glow-violet); }
.hero__lead  { max-width: 54ch; margin-bottom: var(--s5); }
.hero__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* --- Services ------------------------------------------------------------- */

.svc__head { margin-bottom: var(--s6); }
.svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
}
.svc__item { display: flex; flex-direction: column; gap: var(--s2); }
.svc__no {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--violet-text);
  letter-spacing: 0.08em;
}
.svc__item p { color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; }

/* --- Work ----------------------------------------------------------------- */

.work__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.work__note { font-size: 13px; color: var(--text-2); max-width: 34ch; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}

.work__card { display: block; text-decoration: none; color: inherit; }

.work__shot {
  /* MUST be block: this is a <span> (it lives inside an <a>, so a <div> would
     be invalid), and an inline box gives an absolutely-positioned child no
     containing block — the name plates escaped and overlapped the whole grid. */
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s2);
  border: 1px solid var(--edge);
  background: var(--panel-2);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.work__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.work__card:hover .work__shot,
.work__card:focus-visible .work__shot { border-color: var(--cyan); transform: translateY(-2px); }

/* Cards with no screenshot get a typographic plate rather than a grey box or a
   stock illustration — the product's own name at scale, which is honest about
   there being no image yet. */
.work__plate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  color: var(--text-2);
  background:
    repeating-linear-gradient(115deg, rgba(234, 242, 255, 0.05) 0 1px, transparent 1px 9px),
    var(--panel-2);
}

.work__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
}
.work__name { font-size: 17px; font-weight: 600; color: #fff; }
.work__cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

/* --- Approach ------------------------------------------------------------- */

.appr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s5);
}
.appr__item h3 { margin-bottom: var(--s1); }
.appr__item p { color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; }
.appr__no { margin-bottom: 14px; }

/* --- Contact -------------------------------------------------------------- */

.contact { flex-direction: column; justify-content: center; }
.contact__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.6vw, 4rem);
  line-height: 1.08;
  color: #fff;
  margin-bottom: var(--s5);
  text-shadow: 0 0 60px rgba(0, 229, 255, 0.25);
  text-wrap: balance;
}
.contact__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 229, 255, 0.4);
  padding-bottom: 8px;
}
.contact__mail:hover { color: #7FF3FF; border-bottom-color: var(--cyan); }

.colophon {
  width: 100%;
  max-width: var(--grid-max);
  margin: 100px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

@media (max-width: 720px) {
  .work__head { flex-direction: column; align-items: flex-start; }
  .contact { text-align: left; }
}


/* Appended 0.4.1 — the first work card has no project page yet, so it is a
   <figure>, not a dead link. It keeps the card's look and drops the hover
   affordance, because nothing happens when you click it. */
.work__card--static { margin: 0; cursor: default; }
.work__card--static:hover .work__shot { border-color: var(--edge); transform: none; }

/* === END OF FILE (FILENAME: assets/css/sections.css) === */