/* =========================================================================
   home.css

   Eight sections, eight different layout families. A landing page that repeats
   one card grid five times reads as a template, whatever the colours are:
     hero split . positioning band . split-screen . bento . product grid .
     divided rows . kinetic band . scroll rail . centred close . editorial list
   ========================================================================= */

/* ---------- 1. Hero: asymmetric split ----------
   Type sits in the left third against a scrim; the machine keeps the right two
   thirds clear. One gradient, weighted where the words are. */
.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* The stock banner has its own headline and bullet list baked into the left of
   the JPEG. Shifting the focal point right crops most of it away, and the scrim
   below is opaque enough over the type column to kill what is left. Without
   both, two sets of headlines fight each other. */
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 88% center; }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--bg) 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 92%, transparent) 54%, color-mix(in srgb, var(--bg) 45%, transparent) 70%, transparent 88%),
    linear-gradient(to top, var(--bg) 0%, transparent 38%);
}
/* A ch-based cap here resolves against this element's own 16px font, not the
   headline's, so it silently squeezed the H1 into three lines. Fixed measure. */
.hero__content { position: relative; z-index: 1; padding-block: clamp(56px, 6vw, 88px); max-width: 790px; }
/* Measured, not guessed: the client's H1 is 62 characters and the word
   "înfrumusețare" is what forces the break. At this measure 40px is the largest
   size that still lands in two lines on desktop. The H1 is not ours to shorten,
   so the type scales to the copy. */
.hero__title { font-size: clamp(1.45rem, 2.55vw, 2.5rem); max-width: 100%; margin-bottom: .5em; }
.hero__sub { max-width: 46ch; margin-bottom: 0; }
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- 2. Positioning band ----------
   One number, one sentence, hairline top and bottom. Nothing else. */
.band { border-block: 1px solid var(--rule); }
.band__inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 3.5vw, 3.2rem); }
.band__num {
  font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600;
  letter-spacing: -0.05em; line-height: .85; margin: 0; font-variant-numeric: tabular-nums;
}
.band__label { margin: 0; color: var(--dim); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 34ch; line-height: 1.45; }

/* ---------- 3. Split screen: image beside the positioning copy ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
/* No photograph, no split: one measured column of type rather than a column of
   type beside an empty plate the height of the screen. */
.duo--solo { grid-template-columns: minmax(0, 1fr); }
.duo--solo .duo__body { max-width: 68ch; }
/* 4:3 across half of a 1440 page is a 700px-tall picture for one paragraph of
   copy. The photograph does not need to be that big to do its job. */
.duo__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 11; background: var(--plate); }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__body > :last-child { margin-bottom: 0; }

/* ---------- 4. Capabilities: bento, one lead cell plus two ----------
   Three items, three cells, no empty tile. The lead cell is wider and carries
   the image; the two beside it are quieter. Real brand icons, not text-only. */
.bento { display: grid; grid-template-columns: 1.35fr 1fr; grid-auto-rows: minmax(0, auto); gap: clamp(14px, 1.5vw, 20px); }
.bento__cell {
  background: var(--bg-lift); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .4s var(--ease);
}
/* The lead cell spans both rows beside it, so its height is set by them. The
   min-height on top of that was pushing it past 400px on a wide screen, for a
   heading and one line of text sitting at the very bottom. The span alone is
   enough emphasis. */
.bento__cell--lead {
  grid-row: span 2; justify-content: flex-end; position: relative; overflow: hidden;
  background:
    linear-gradient(to top, var(--bg-lift) 32%, color-mix(in srgb, var(--bg-lift) 55%, transparent) 62%, transparent),
    radial-gradient(130% 80% at 70% 12%, var(--plate-2), var(--bg-lift) 70%);
}
.bento__cell--lead .bento__icon { position: absolute; top: 10%; right: 8%; width: clamp(84px, 11vw, 132px); }
/* Client artwork is dark-on-transparent. Inverting is the only way it reads on
   a dark page without re-drawing it. */
.bento__icon { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; }
.bento__cell h3 { margin: 0; font-weight: 500; }
.bento__cell p { margin: 0; color: var(--dim); font-size: .93rem; }

/* ---------- 6. Services: divided rows ----------
   Four items is a list, not a grid. Icon, name, one line, arrow. */
.rows { border-top: 1px solid var(--rule); }
.row-item {
  display: grid; grid-template-columns: 52px minmax(0, 22ch) 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.2rem, 2vw, 1.9rem) 0; border-bottom: 1px solid var(--rule);
  transition: background-color .35s var(--ease), padding-inline .35s var(--ease);
}
.row-item__icon { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); opacity: .45; transition: opacity .35s var(--ease); }
.row-item h3 { margin: 0; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.row-item p { margin: 0; color: var(--dim); font-size: .92rem; max-width: 52ch; }
.row-item__go { color: var(--faint); transition: transform .4s var(--ease), color .35s var(--ease); }

/* ---------- 7. Kinetic band ---------- */
.marquee-band { padding-block: clamp(2.2rem, 4vw, 4rem); border-bottom: 1px solid var(--rule); }
.marquee__item {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem); letter-spacing: -0.045em;
  /* Outlined, not filled: the band is texture behind the page, not a heading.
     The stroke still has to be visible on near-black once the edge fades take
     their share of it. */
  color: transparent; -webkit-text-stroke: 1px #48566E;
  transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
}

/* ---------- 8. Offers: horizontal scroll rail ----------
   Breadth without another grid. Flick on touch, scrollbar-free on desktop. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 30%); gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ---------- 9. Closing statement ---------- */
.cta-band { border-top: 1px solid var(--rule); }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }

/* ---------- 10. Blog: editorial, one lead plus a stack ----------
   The lead is the only article that gets a full-width picture. The rest run
   beside it as horizontal rows, and the column stretches to the lead's height
   so the block ends level on both sides. Two short rows against a tall lead is
   what left a third of this section empty. */
.editorial { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
/* One article and there is no second column to fill. */
.editorial--solo { grid-template-columns: minmax(0, 780px); justify-content: center; }
/* 1fr rows, so however many articles turn up they divide the lead's height
   between them instead of piling up at the top. */
.editorial__rest { display: grid; grid-auto-rows: 1fr; gap: clamp(14px, 1.4vw, 18px); }
.editorial__rest .post-card { flex-direction: row; align-items: stretch; }
/* No aspect ratio: the row's own height sets it, which is what keeps the
   column flush with the lead. Fixed width, cover fit, so the crop stays sane. */
.editorial__rest .post-card__media { width: clamp(112px, 13.5vw, 186px); flex: none; }
.editorial__rest .post-card__body { justify-content: center; gap: .3rem; padding: clamp(.9rem, 1.3vw, 1.25rem) clamp(1rem, 1.4vw, 1.4rem); }
.editorial__rest .post-card__title { font-size: clamp(.98rem, 1.1vw, 1.06rem); }
.editorial__rest .post-card__excerpt { font-size: .84rem; -webkit-line-clamp: 2; }
/* A picture-less row would otherwise be a wall of text against the lead's
   photograph; the extra breathing room stands in for the missing crop. */
.editorial__rest .post-card--textual .post-card__body { padding-inline: clamp(1.2rem, 1.8vw, 1.7rem); }

@media (hover: hover) and (pointer: fine) {
  .bento__cell:hover { box-shadow: inset 0 0 0 1px var(--rule-lit); }
  .row-item:hover { background: var(--bg-lift); padding-inline: 1.25rem; }
  .row-item:hover .row-item__icon { opacity: 1; }
  .row-item:hover .row-item__go { transform: translateX(5px); color: var(--accent); }
  .marquee__item:hover { color: var(--text); -webkit-text-stroke-color: transparent; }
}

@media (max-width: 1024px) {
  .duo, .editorial, .editorial--solo { grid-template-columns: 1fr; }
  .editorial__rest { grid-auto-rows: auto; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--lead { grid-row: auto; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; }
  /* The desktop vw term collapses on a phone, leaving the clamp floor. Scaled
     to the copy so the H1 lands in three or four lines, not seven. */
  .hero__title { font-size: clamp(1.45rem, 5.6vw, 2rem); }
  .hero__img { object-position: 64% center; }
  .hero__overlay { background: linear-gradient(to top, var(--bg) 14%, color-mix(in srgb, var(--bg) 78%, transparent) 52%, color-mix(in srgb, var(--bg) 42%, transparent)); }
  .hero__content { padding-block: clamp(90px, 22vw, 150px) clamp(48px, 10vw, 72px); }
  .band__inner { grid-template-columns: 1fr; gap: .6rem; }
  .row-item { grid-template-columns: 36px 1fr auto; row-gap: .35rem; }
  .row-item p { grid-column: 2 / -1; }
  .editorial__rest { grid-auto-rows: auto; }
  .editorial__rest .post-card__media { width: 104px; }
}