/* ==========================================================
   FleetFixer Media, page styles
   Photography portfolio + ShootProof-style gallery platform.
   Built on the shared design tokens (ff-tokens.css), so every
   surface repaints for light and dark themes automatically.
   Loaded after marketing.css, which it leans on for .sec,
   .sec-header and the footer chrome.
   ========================================================== */

/* ─── Hero with Find your photos search ─────────────────── */
.m-hero{
  position:relative; overflow:hidden;
  min-height:78svh; display:flex; align-items:center; justify-content:center;
  padding:120px 24px 90px; background:#0b1410;
}
.m-hero-video, .m-hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.m-hero-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,16,12,.74) 0%,rgba(8,16,12,.6) 45%,rgba(8,16,12,.9) 100%);
}
.m-hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.m-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:rgba(255,255,255,.62); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); padding:8px 16px; border-radius:99px; margin-bottom:22px;
}
.m-hero h1{
  font-family:var(--font-display); font-weight:900; color:#fff;
  font-size:clamp(38px,6vw,72px); line-height:1.03; letter-spacing:-.035em; margin:0 0 16px;
}
.m-hero h1 .accent{
  background:linear-gradient(135deg,#5FD3A2,#8fe3c0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.m-hero-sub{ font-size:clamp(16px,2vw,19px); line-height:1.65; color:rgba(255,255,255,.66); max-width:560px; margin:0 auto 34px; }

.m-search{ position:relative; max-width:600px; margin:0 auto; }
.m-search input{
  width:100%; padding:19px 52px 19px 54px; font-size:16.5px; font-weight:500;
  border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.09); backdrop-filter:blur(12px);
  color:#fff; caret-color:#8fe3c0; font-family:inherit;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),background .3s,border-color .3s,box-shadow .4s;
}
.m-search input::placeholder{ color:rgba(255,255,255,.4); }
.m-search input:focus{
  outline:none; background:rgba(255,255,255,.13); border-color:rgba(95,211,162,.45);
  box-shadow:0 0 0 4px rgba(95,211,162,.14),0 8px 32px rgba(0,0,0,.3); transform:translateY(-2px);
}
.m-search .m-search-ic{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.4); font-size:15px; pointer-events:none; }
.m-search .m-search-go{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  width:38px; height:38px; border-radius:11px; font-size:14px; transition:background .2s,transform .2s;
}
.m-search .m-search-go:hover{ transform:translateY(-50%) scale(1.06); }
.m-search-drop{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  background:var(--panel); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.22); max-height:380px; overflow-y:auto; display:none; text-align:left;
}
.m-search-drop.open{ display:block; }
.m-search-row{ display:flex; align-items:center; gap:12px; padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--stroke); transition:background .12s; }
.m-search-row:last-child{ border-bottom:none; }
.m-search-row:hover{ background:var(--surface-2); }
.m-search-row img{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.m-search-row .t{ font-size:14px; font-weight:600; color:var(--text-strong); }
.m-search-row .s{ font-size:12px; color:var(--muted); }
.m-hero-hint{ margin-top:14px; font-size:13px; color:rgba(255,255,255,.4); }
.m-hero-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.m-hero-tags a{
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  padding:7px 14px; border-radius:99px; text-decoration:none; transition:background .18s,border-color .18s;
}
.m-hero-tags a:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }

/* ─── Section scaffolding (complements marketing.css) ──── */
.m-sec{ padding:clamp(56px,8vw,96px) 24px; }
.m-sec-inner{ max-width:1200px; margin:0 auto; }
.m-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.m-sec-head h2{ font-family:var(--font-display); font-size:clamp(24px,3vw,36px); font-weight:800; letter-spacing:-.025em; color:var(--text-strong); margin:0; }
.m-sec-head p{ font-size:15px; color:var(--muted); margin:6px 0 0; }
.m-sec-head .m-link{ color:var(--accent); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; }
.m-sec-head .m-link i{ transition:transform var(--dur-1) var(--ease); }
.m-sec-head .m-link:hover i{ transform:translateX(4px); }

/* ─── Collection cards (cover image + meta) ─────────────── */
.m-ccards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.m-ccard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.m-ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--stroke-strong); }
.m-ccard-cover{ aspect-ratio:4/3; background:var(--surface-2); position:relative; overflow:hidden; }
.m-ccard-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-ccard-count{
  position:absolute; bottom:10px; right:10px; font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); padding:4px 9px; border-radius:99px;
}
.m-ccard-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.m-ccard-body h3{ font-size:15.5px; font-weight:700; color:var(--text-strong); margin:0; line-height:1.25; }
.m-ccard-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--muted); }
.m-ccard-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); opacity:.6; }

/* ─── Year picker tiles ─────────────────────────────────── */
.m-years{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.m-year{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  padding:24px 22px; border-radius:var(--radius-lg); border:1px solid var(--stroke);
  background:var(--panel); color:inherit; transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.m-year:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent); }
.m-year .y{ font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--text-strong); letter-spacing:-.02em; }
.m-year .c{ font-size:13px; color:var(--muted); }

/* ─── Facet chips ───────────────────────────────────────── */
.m-facets{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.m-chip{
  font-size:13px; font-weight:600; color:var(--text); cursor:pointer;
  background:var(--panel); border:1px solid var(--stroke); padding:8px 15px; border-radius:99px;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.m-chip:hover{ border-color:var(--stroke-strong); }
.m-chip.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

/* ─── Photo masonry grid ────────────────────────────────── */
.m-grid{ columns:4; column-gap:12px; }
.m-photo{
  break-inside:avoid; margin:0 0 12px; width:100%; display:block; cursor:pointer;
  border-radius:10px; overflow:hidden; background:var(--surface-2); position:relative;
  border:1px solid var(--stroke);
}
.m-photo img{ width:100%; height:auto; display:block; transition:transform var(--dur-3) var(--ease); }
.m-photo:hover img{ transform:scale(1.03); }
.m-photo-fav{
  position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; border:none; cursor:pointer; font-size:14px;
  background:rgba(0,0,0,.42); color:#fff; opacity:0; transition:opacity var(--dur-2) var(--ease),background var(--dur-1) var(--ease);
}
.m-photo:hover .m-photo-fav{ opacity:1; }
.m-photo-fav.on{ opacity:1; color:#ff5d7a; }
.m-photo-tag{
  position:absolute; left:8px; bottom:8px; z-index:2; font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px); padding:3px 8px; border-radius:6px;
}

/* ─── Fullscreen viewer ─────────────────────────────────── */
.m-viewer{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(6,12,9,.96); backdrop-filter:blur(6px);
}
.m-viewer.open{ display:grid; grid-template-columns:1fr 320px; }
.m-viewer-stage{ position:relative; display:grid; place-items:center; overflow:hidden; }
.m-viewer-stage img{ max-width:100%; max-height:100vh; object-fit:contain; transition:transform .2s ease; user-select:none; }
.m-viewer-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:18px; transition:background .15s;
}
.m-viewer-nav:hover{ background:rgba(255,255,255,.24); }
.m-viewer-prev{ left:18px; } .m-viewer-next{ right:18px; }
.m-viewer-top{ position:absolute; top:0; left:0; right:0; display:flex; gap:8px; justify-content:flex-end; padding:16px; z-index:3; }
.m-viewer-btn{ width:42px; height:42px; border-radius:11px; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:15px; transition:background .15s; }
.m-viewer-btn:hover{ background:rgba(255,255,255,.24); }
.m-viewer-btn.on{ background:var(--accent); }
.m-viewer-side{ background:var(--panel); border-left:1px solid var(--stroke); padding:28px 24px; overflow-y:auto; }
.m-viewer-side h3{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text-strong); margin:0 0 4px; }
.m-viewer-side .m-vs-coll{ font-size:13px; color:var(--muted); margin-bottom:20px; }
.m-meta-row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--stroke); font-size:13px; }
.m-meta-row .k{ color:var(--muted); } .m-meta-row .v{ color:var(--text-strong); font-weight:600; text-align:right; }
.m-viewer-actions{ display:flex; gap:10px; margin-top:22px; }
.m-viewer-actions .btn{ flex:1; justify-content:center; }

/* ─── Sponsors / partners ───────────────────────────────── */
.m-logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.m-logo{
  display:grid; place-items:center; aspect-ratio:16/9; padding:18px;
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  color:var(--muted); font-weight:700; text-align:center; transition:border-color var(--dur-2) var(--ease);
}
.m-logo:hover{ border-color:var(--stroke-strong); }
.m-logo img{ max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1); opacity:.8; transition:filter .2s,opacity .2s; }
.m-logo:hover img{ filter:grayscale(0); opacity:1; }

/* ─── Services cards ────────────────────────────────────── */
.m-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.m-svc{ background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:12px; }
.m-svc .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); }
.m-svc h3{ font-size:18px; font-weight:800; color:var(--text-strong); margin:0; }
.m-svc p{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

/* ─── Forms (contact / book coverage) ───────────────────── */
.m-form{ max-width:640px; margin:0 auto; display:grid; gap:16px; }
.m-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.m-field{ display:flex; flex-direction:column; gap:6px; }
.m-field label{ font-size:13px; font-weight:600; color:var(--text-strong); }
.m-field input, .m-field textarea, .m-field select{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--stroke);
  background:var(--panel-2); color:var(--text); font-family:inherit; font-size:14.5px;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.m-field input:focus, .m-field textarea:focus, .m-field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.m-field textarea{ min-height:120px; resize:vertical; }

/* ─── Empty / loading states ────────────────────────────── */
.m-empty{ text-align:center; padding:64px 24px; color:var(--muted); }
.m-empty i{ font-size:34px; opacity:.5; margin-bottom:12px; display:block; }
.m-empty h3{ font-size:17px; color:var(--text-strong); margin:0 0 6px; }
.m-skeleton{ background:linear-gradient(90deg,var(--surface-2),var(--panel-2),var(--surface-2)); background-size:200% 100%; animation:mShimmer 1.3s infinite; border-radius:10px; }
@keyframes mShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  .m-ccards{ grid-template-columns:repeat(3,1fr); }
  .m-grid{ columns:3; }
  .m-services{ grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .m-ccards{ grid-template-columns:repeat(2,1fr); }
  .m-grid{ columns:2; }
  .m-services{ grid-template-columns:1fr; }
  .m-viewer.open{ grid-template-columns:1fr; }
  .m-viewer-side{ display:none; }
  .m-viewer.show-info .m-viewer-side{ display:block; position:absolute; inset:auto 0 0 0; max-height:55vh; border-left:none; border-top:1px solid var(--stroke); }
  .m-form .row{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .m-ccards{ grid-template-columns:1fr; }
  .m-grid{ columns:1; }
}