/* practices-creative.css
   Award-level visual language: gradients, clip-path masks, subtle motion.
   Designed to layer on top of css/main.css which provides variables (accent, muted, etc.)
*/

/* Base variables (fallbacks) */
:root{
  --accent: #0b61d1;
  --accent-2: #0b3d91;
  --muted: #6b7280;
  --bg: #f6f8fb;
  --card: #ffffff;
  --glass: rgba(255,255,255,0.7);
  --max-width: 1200px;
}

/* reset/utility (assumes main.css resets basics) */
.container{ max-width:var(--max-width); margin:0 auto; padding:28px; }

/* HERO CREATIVE */
.hero-creative{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}
.hero-graphic{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 10% 30%, rgba(11,97,209,0.18), transparent 10%),
              radial-gradient(800px 500px at 85% 70%, rgba(11,61,145,0.14), transparent 10%),
              linear-gradient(90deg, rgba(11,97,209,0.18), rgba(11,61,145,0.18));
  filter: blur(18px);
  transform: scale(1.04);
  z-index:0;
  animation: slowDrift 12s linear infinite;
  will-change:transform;
}
@keyframes slowDrift{ from{ transform:scale(1.03) translateY(0) } to{ transform:scale(1.05) translateY(-6px) } }

.hero-panel{
  position:relative; z-index:2; padding:48px 0;
  display:flex; flex-direction:column; gap:14px;
}
.hero-panel h1{ font-size: clamp(28px, 4.2vw, 44px); margin:0; line-height:1.02; font-weight:800; letter-spacing:-0.02em; }
.hero-sub{ color:rgba(255,255,255,0.9); margin:0; }
.finder{ display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.finder-left input{
  min-width:320px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06); color:inherit; backdrop-filter: blur(4px);
}
.finder-mid select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:inherit; }
.finder-right .btn{ min-width:110px; }
.finder-hint{ margin-top:8px; color:rgba(255,255,255,0.85); font-size:13px }

/* accessible reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-graphic{ animation:none; transform:none; filter:none; }
}

/* SHOWCASE (asymmetric editorial) */
.showcase .intro{ margin-bottom:18px; }
.feature{ display:grid; gap:18px; align-items:center; grid-template-columns: 1fr 460px; margin-bottom:22px; }
.feature .feature-media{ position:relative; overflow:hidden; border-radius:12px; box-shadow:0 18px 50px rgba(6,12,30,0.08); }
.feature .feature-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .9s cubic-bezier(.2,.9,.3,1); }
.feature .feature-body{ padding:18px; background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.98)); border-radius:12px; box-shadow:0 8px 20px rgba(6,12,30,0.04); }
.feature .kicker{ font-weight:700; color:var(--accent-2); display:inline-block; margin-bottom:8px; font-size:13px; }
.feature h3{ margin:0 0 8px; font-size:20px; }
.feature .lede{ color:var(--muted); margin-bottom:10px; }
.feature .feature-actions{ margin-top:12px; display:flex; gap:12px; align-items:center; }

/* sizes */
.feature-large{ grid-template-columns: 520px 1fr; } /* swap visual dominance */
.feature-small{ grid-template-columns: 1fr 360px; }
.feature-medium{ grid-template-columns: 380px 1fr; }

/* masks (clip-path variations) */
.mask{ position:absolute; inset:0; pointer-events:none; }
.mask.diagonal{ clip-path: polygon(0 0,100% 0,100% 75%,0 100%); background:linear-gradient(180deg, transparent, rgba(0,0,0,0.05)); }
.mask.curve{ clip-path: path('M0,0 L100,0 L100,100 Q55,75 0,100 Z'); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.mask.waves{ clip-path: polygon(0 0,100% 0,100% 100%,0 70%); background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent); }
.mask.slant{ clip-path: polygon(0 0,100% 15%,100% 100%,0 100%); background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent); }

/* hover subtle parallax */
.feature:hover .feature-media img{ transform: scale(1.06) translateY(-6px); }

/* ICON GRID */
.icons-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:14px; list-style:none; padding:0; margin:20px 0; }
.icon-tile{ position:relative; display:block; width:100%; text-align:left; padding:18px; border-radius:12px; border:1px solid rgba(6,12,30,0.04); background:var(--card); box-shadow:0 12px 30px rgba(6,12,30,0.04); transition: transform .26s ease, box-shadow .26s ease; overflow:hidden; }
.icon-tile .icon{ width:44px; height:44px; display:block; margin-bottom:12px; fill:var(--accent-2); }
.icon-tile .meta strong{ display:block; font-size:16px; }
.icon-tile .reveal-panel{ position:absolute; right:12px; top:12px; opacity:0; transform:translateY(6px); transition: all .3s ease; color:var(--muted); font-size:13px; }
.icon-tile:hover, .icon-tile:focus{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(6,12,30,0.08); }
.icon-tile:hover .reveal-panel, .icon-tile:focus .reveal-panel{ opacity:1; transform:none }

/* CASES CAROUSEL */
.case-carousel{ display:flex; gap:12px; align-items:center; margin-top:12px; position:relative; }
.cviewport{ flex:1; overflow:hidden; outline:none; }
.case-card{ width:100%; display:flex; gap:16px; align-items:center; padding:12px; border-radius:12px; background:var(--card); box-shadow:0 12px 30px rgba(6,12,30,0.05); }
.case-card img{ width:220px; height:140px; object-fit:cover; border-radius:8px; }
.cbtn{ width:48px; height:48px; border-radius:999px; border:0; background:var(--card); box-shadow:0 6px 18px rgba(6,12,30,0.06); cursor:pointer; font-size:20px; }

/* AWARDS CREATIVE */
.awards-hall{ display:flex; gap:18px; align-items:start; margin-top:12px; flex-wrap:wrap; }
.award-hero{ flex:1 1 420px; border-radius:12px; overflow:hidden; box-shadow:0 18px 50px rgba(6,12,30,0.06); margin:0; display:flex; }
.award-hero img{ width:100%; height:100%; object-fit:cover; }
.award-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; flex:1 1 420px; }
.award-card{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:var(--card); box-shadow:0 12px 30px rgba(6,12,30,0.04); }

/* MAP + OFFICES */
.map-and-list{ display:flex; gap:18px; align-items:center; margin-top:18px; }
.map-decor{ flex:1 1 60%; border-radius:12px; overflow:hidden; min-height:160px; box-shadow:0 18px 50px rgba(6,12,30,0.06); }
.map-svg{ width:100%; height:100%; display:block; }
.offices-list{ flex:0 0 260px; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.offices-list li{ background:var(--card); padding:12px; border-radius:8px; box-shadow:0 8px 20px rgba(6,12,30,0.04); }

/* FINAL CTA */
.final-cta .cta-block{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding:18px; border-radius:12px; background:linear-gradient(90deg,#fff,#fbfdff); box-shadow:0 18px 50px rgba(6,12,30,0.06); }

/* reveal helper */
.reveal{ opacity:0; transform:translateY(12px); transition: all .6s cubic-bezier(.2,.9,.3,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* responsive */
@media (max-width:980px){
  .feature, .feature-large, .feature-small, .feature-medium { grid-template-columns: 1fr; }
  .map-and-list{ flex-direction:column; }
  .offices-list{ width:100%; }
  .icons-grid{ grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
  .finder-left input{ min-width:100%; }
}