/* =============================================================
   anuragalladi.com: mobile fixes
   Load this AFTER each page's own <style> block
   (last thing before </head>) so it wins at equal specificity.
   ============================================================= */


/* -------------------------------------------------------------
   1. IMAGES: never stretch (all screen sizes)
   Case-study images carry inline min-height (280/300/200px).
   With no object-fit, wide images get stretched vertically on
   narrow screens. This neutralises it without editing the HTML.
   ------------------------------------------------------------- */
img[style*="min-height"] {
  min-height: 0 !important;
  height: auto !important;
}

/* Project-card logos: show the whole logo instead of cropping it */
.p-card-visual .p-hero-img[src*="logo"] {
  object-fit: contain;
  padding: 14%;
}


/* -------------------------------------------------------------
   2. TOUCH DEVICES: hover states never fire, so don't depend on them
   ------------------------------------------------------------- */
@media (hover: none) {
  .gallery-track:hover .gallery-img,
  .gallery-img:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none;
  }
  .gallery-img .gallery-caption { opacity: 1; }
  .p-card:hover,
  .testi-card:hover { transform: none; }
}


/* -------------------------------------------------------------
   3. PHONES & SMALL TABLETS
   ------------------------------------------------------------- */
@media (max-width: 900px) {

  /* --- Home: photo strip keeps every photo's real shape --- */
  .gallery-img {
    width: auto;
    height: 220px;
  }
  .gallery-img img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
  .gallery-track-wrapper::before,
  .gallery-track-wrapper::after { width: 40px; }

  /* --- Home: readable card text (was 8px tags / 12px body) --- */
  .p-card-tags span {
    font-size: 0.68rem;
    padding: 4px 9px;
  }
  .p-card-body p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  /* --- Minimum size for small mono labels across all pages --- */
  .case-section .sec-label,
  .case-hero .eyebrow,
  .meta-item .label,
  .stat-box .desc,
  .player-quote .attr,
  .keyword-card .kw-target,
  .back-nav .proj-id { font-size: 0.7rem; }

  /* --- Case-study hero: get to the content faster --- */
  .case-hero {
    min-height: auto;
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }
  .case-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .case-hero .hero-sub {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Meta strip becomes an "at a glance" card */
  .meta-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
  }
  .meta-strip::before {
    content: 'At a glance';
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* --- Case-study body: tighter rhythm, calmer type --- */
  .case-section { padding: 3rem 1.25rem; }
  .case-section h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    margin-bottom: 1.25rem;
  }
  .case-section > p {
    font-size: 1rem;
    line-height: 1.7;
  }
  .stat-callout {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
  }
  .stat-box .num { font-size: 2.2rem; }
  .two-col { gap: 1.5rem; margin: 2rem 0; }
  .full-img,
  .cs-full-img { margin: 1.5rem 0; }

  /* Porsche: show full 16:9 slides instead of trimming to 16:10 */
  .two-col img:not(.img-placeholder) {
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Anchor jumps land below the fixed back-nav */
  section[id] { scroll-margin-top: 72px; }


  /* ---------- Elements added by mobile-fix.js ---------- */

  .mf-hidden { display: none !important; }

  .mf-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .mf-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0.25rem 0 1.5rem;
    padding: 0 18px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    cursor: pointer;
  }
  .mf-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Section jump chips under the hero */
  .mf-jump {
    display: flex;
    gap: 8px;
    margin-top: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mf-jump::-webkit-scrollbar { display: none; }
  .mf-jump a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text2);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
  }

  /* Reading progress */
  .mf-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 10001;
    pointer-events: none;
  }
}


/* -------------------------------------------------------------
   4. DESKTOP: dedicated navigation rail on project pages
   The floating section menu used to sit on top of images and
   grids. It now lives in its own left column, together with
   "Back to projects", and the page content is padded to clear it.
   (Only project pages have .section-nav, so the homepage is untouched.)
   ------------------------------------------------------------- */
@media (min-width: 901px) {
  :root { --rail: clamp(210px, 17vw, 260px); }

  body:has(.section-nav) { padding-left: var(--rail); }

  /* Top bar becomes the head of the rail */
  body:has(.section-nav) .back-nav {
    right: auto;
    width: var(--rail);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 2rem 1.5rem 1.5rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 10001;
  }
  body:has(.section-nav) .back-nav .proj-id {
    line-height: 1.5;
  }

  /* Section menu becomes the body of the rail, always visible */
  .section-nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    transform: none;
    width: var(--rail);
    min-width: 0;
    padding: 8.5rem 0 2rem;
    justify-content: flex-start;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: rgba(8, 8, 11, 0.94);
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    z-index: 10000;
  }
  .section-nav::before {
    content: 'On this page';
    display: block;
    padding: 0 1.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text2);
    opacity: 0.6;
  }
  .section-nav a {
    padding: 10px 1.5rem;
    font-size: 0.75rem;
    border-left: 2px solid transparent;
  }

  /* Anchor jumps no longer need to clear a top bar */
  body:has(.section-nav) section[id] { scroll-margin-top: 1.5rem; }
}