/* ============================================================
   Home — Option D (Bento) — homepage-specific styles
   Builds on styles.css (tokens, header, footer, buttons, sections).
   ============================================================ */

/* ---------- BENTO HERO ---------- */
.bento-wrap{ padding-block:clamp(22px,3vw,38px); }
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3, minmax(150px, 1fr));
  grid-template-areas:
    "head head drive deco"
    "head head drive accent"
    "patio patio floor accent";
  gap:14px;
}
.bt-head{ grid-area:head; }
.bt-drive{ grid-area:drive; }
.bt-deco{ grid-area:deco; }
.bt-accent{ grid-area:accent; }
.bt-patio{ grid-area:patio; }
.bt-floor{ grid-area:floor; }

.btile{
  position:relative; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
  background-size:cover; background-position:center; isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btile--img{ min-height:150px; }
.btile--img:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(27,26,23,.2); }
.btile--img::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(20,19,16,.06) 0%, rgba(20,19,16,.3) 45%, rgba(20,19,16,.9) 100%);
}
.btile .lab{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:#fff; font-size:clamp(21px,1.7vw,27px); line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.btile .lab small{
  display:block; font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.16em; color:#f0955c; margin-bottom:9px;
}
.btile .lab .arr{ display:inline-block; transition:transform .2s ease; margin-left:4px; }
.btile--img:hover .lab .arr{ transform:translateX(5px); }

/* head tile */
.bt-head{ background:var(--dark); color:#fff; justify-content:center; }
.bt-head .eyebrow{ color:var(--accent-hi); }
.bt-head .eyebrow::before{ background:var(--accent-hi); }
.bt-head h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  line-height:.94; font-size:clamp(40px,4.6vw,64px); color:#fff; margin:16px 0 14px;
}
.bt-head h1 .o{ color:var(--accent-hi); }
.bt-head p{ color:var(--on-dark-2); font-size:16px; max-width:40ch; margin-bottom:22px; line-height:1.5; }
.bt-head .bhead-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.bt-head .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.bt-head .btn--ghost:hover{ background:#fff; color:var(--ink); }

/* accent stat + phone tile */
.bt-accent{ background:var(--accent); color:#fff; justify-content:space-between; }
.bt-accent .accent-top{ display:flex; align-items:center; justify-content:space-between; }
.bt-accent .accent-top svg{ width:30px; height:30px; }
.bt-accent .stars{ letter-spacing:2px; font-size:15px; }
.bt-accent .big{ font-family:var(--display); font-weight:700; font-size:clamp(46px,4.6vw,64px); line-height:.85; }
.bt-accent .cap{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:14px; margin-top:6px; }
.bt-accent .num{ font-family:var(--display); font-weight:700; font-size:clamp(20px,1.7vw,24px); margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.3); white-space:nowrap; display:flex; align-items:center; gap:8px; }
.bt-accent .num svg{ width:18px; height:18px; }

/* badges row under bento */
.bento-badges{
  display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:24px; padding-top:22px;
  border-top:1px solid var(--line);
}
.bento-badge{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); font-weight:500; }
.bento-badge svg{ width:20px; height:20px; color:var(--accent); }
.bento-badge b{ font-family:var(--display); font-size:24px; color:var(--ink); line-height:1; }

/* photographic helpers reused across page */
.photo{ background-size:cover; background-position:center; }
.card__media .photo, .gallery__item .photo, .ba__layer .photo{ width:100%; height:100%; }
.split__media .photo{ width:100%; height:100%; min-height:440px; border-radius:var(--radius); }
.hero__media .photo{ width:100%; height:100%; }

@media (max-width:920px){
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "head head"
      "drive deco"
      "patio patio"
      "floor accent";
  }
  .bt-accent{ flex-direction:row; align-items:center; gap:16px; }
  .bt-accent .num{ margin-top:0; padding-top:0; border-top:none; }
}
@media (max-width:560px){
  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "head head"
      "drive deco"
      "patio patio"
      "floor floor"
      "accent accent";
  }
  .bt-head h1{ font-size:36px; }
  .btile--img{ min-height:160px; }
}

/* ============================================================
   INTENTIONAL PHOTO PLACEHOLDERS (no hotlinked stock images)
   Replace these with the client's real, locally-hosted job photos.
   - Bento image tiles use .btile--ph (dark concrete texture).
   - Cards / split / gallery / before-after use the shared .ph helper
     from styles.css with a data-label describing the photo to drop in.
   ============================================================ */
.btile--ph{
  background-color:#2a2824;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0 16px, rgba(255,255,255,0) 16px 32px);
}
.btile--ph .ph-tag{
  position:absolute; top:14px; left:16px; z-index:1;
  font-family:'Courier New', monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  display:inline-flex; align-items:center; gap:6px;
}
.btile--ph .ph-tag svg{ width:14px; height:14px; }

/* shared .ph gets a faint centered camera icon for the photo slots */
.ph .ph__icon svg{ width:42px; height:42px; }

/* ============================================================
   RECENT WORK — featured tile + 4-up grid (replaces before/after slider)
   ============================================================ */
.work-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
}
.work-tile{
  position:relative; overflow:hidden; border-radius:10px; min-height:240px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.work-tile--feat{ grid-row:1 / span 2; }
.work-tile .ph{ position:absolute; inset:0; width:100%; height:100%; transition:transform .4s ease; }
.work-tile .ph::after{ display:none; } /* caption handled by .work-cap below */
.work-tile:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(27,26,23,.2); }
.work-tile:hover .ph{ transform:scale(1.05); }
.work-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px 18px;
  background:linear-gradient(transparent, rgba(20,19,16,.85));
  color:#fff; font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:16px;
}
@media (max-width:880px){
  .work-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .work-tile--feat{ grid-column:1 / -1; grid-row:auto; min-height:300px; }
}
@media (max-width:560px){
  .work-grid{ grid-template-columns:1fr; }
}

/* real photos in the Recent Work tiles */
.work-tile .photo{ position:absolute; inset:0; width:100%; height:100%; transition:transform .4s ease; }
.work-tile:hover .photo{ transform:scale(1.05); }