/* ============================================================
   AskSummu — Premium Polish Layer (additive, site-wide)
   Harmonizes with the existing slate (#c2c9d4) + gold (#f6dd92)
   system. Pure enhancement: no layout/structure changes.
   ============================================================ */

/* ---- 1. Editorial type rendering ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-kerning:normal;
}
/* tighter, balanced headings = expensive editorial feel */
h1,h2,h3,.main-title,.section-head h2,.splash-title,.leader-info h2,
.event-header h2,.highlight-item h3,.m-name,.sec-title{
  text-wrap:balance;
  font-optical-sizing:auto;
}
/* comfortable measure + soft wrapping on body copy */
p,.hero-sub,.m-bio,.leader-bio,.event-card > p{ text-wrap:pretty; }

/* ---- 2. Premium selection + caret ---- */
::selection{ background:rgba(194,201,212,.26); color:#fff; }
::-moz-selection{ background:rgba(194,201,212,.26); color:#fff; }

/* ---- 3. Refined slate scrollbar ---- */
*{ scrollbar-width:thin; scrollbar-color:rgba(160,168,182,.34) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(180,187,200,.42),rgba(120,127,140,.34));
  border-radius:20px; border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(200,207,220,.6),rgba(150,157,170,.5));
  background-clip:padding-box;
}

/* ---- 4. Accessible, on-brand focus ring (keyboard only) ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(194,201,212,.85);
  outline-offset:3px;
  border-radius:8px;
}

/* ---- 5. High-end interaction easing ---- *
   Only refines the *timing* of transforms the design already animates,
   so motion reads as intentional & smooth. Never sets box-shadow/layout. */
.event-card,.featured-award,.highlight-item,.stat,.reel,.member-card,
.leader-card,.cat,.card,.contact-card,.team-feature,.filter-btn,
.cat,.jb-btn,.l-btn,.social a,.about-socials .as-row a,.m-actions a{
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
  will-change:transform;
}
/* media inside cards: gentle, premium zoom easing */
.m-photo img,.leader-photo img,.award-imgs img,.reel img,
.event-slider img,.team-feature img{
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
}

/* ---- 5b. Layered depth on card imagery (composes with existing shadows) ----
   filter:drop-shadow stacks independently of box-shadow, so this adds real
   ambient depth to photos/video without overriding any card styling. */
.m-photo img,.leader-photo img,.award-imgs img,.team-feature img,.award-video{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
}
.award-imgs img:hover,.m-photo img:hover,.leader-photo img:hover{
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.62));
}

/* ---- 6. Crisp image rendering + no blue tap flash ---- */
img,video{ image-rendering:auto; }
*{ -webkit-tap-highlight-color:transparent; }

/* ---- 7. Mobile-first refinement (priority) ---- */
@media (max-width:640px){
  /* touch-friendly minimum targets without altering desktop */
  .filter-btn,.jb-btn,.l-btn,.reels-nav button,.nav-btn,
  .social a,.about-socials .as-row a,.m-actions a,.cat{
    min-height:44px;
  }
  /* slightly looser body rhythm for small screens */
  .event-card > p,.hero-sub{ line-height:1.7; }
  /* keep section breathing room from collapsing on phones */
  .section-head{ margin-top:64px; margin-bottom:32px; }
}
@media (max-width:420px){
  /* prevent any horizontal overflow on the smallest devices */
  html,body{ overflow-x:hidden; }
}

/* ---- 8. Honor reduced-motion globally ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- 9. Universal no-overflow / fit safety (phones → Full-HD) ---- */
html,body{ max-width:100%; overflow-x:hidden; }
img,video,svg,canvas,iframe{ max-width:100%; }
*{ min-width:0; }
/* never let a fixed-width media element force horizontal scroll on phones */
@media (max-width:480px){
  .award-imgs img,.m-photo img,.leader-photo img,.team-feature img,.reel,.reel img{ max-width:100%; }
}