/* ============================================================
   MOBILE.CSS — Phone-first responsive overrides
   ALL rules are inside @media (max-width: 768px) breakpoints
   so the desktop layout is completely untouched.
   ============================================================ */

/* ─── Touch target baseline ─────────────────────────────────── */
@media (max-width: 768px) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── HEADER ──────────────────────────────────────────────── */
  .site-header {
    padding: 0.55rem 1rem;
    top: 0;
  }

  /* Hide the left tagline — too cramped on phones */
  .header-left {
    display: none;
  }

  /* Name: unpin from absolute-center, flow with flexbox */
  .header-center {
    position: static;
    transform: none;
    flex: 1;
    pointer-events: auto;
  }

  .header-name {
    font-size: 0.78rem;
  }

  .header-right {
    gap: 0.6rem;
    flex-shrink: 0;
  }

  /* Collapse home-btn label */
  #home-btn span {
    display: none;
  }

  #home-btn {
    padding: 0.38rem 0.6rem;
    gap: 0;
    min-width: unset;
  }

  .social-links {
    gap: 0.5rem;
  }

  .social-links svg {
    width: 17px;
    height: 17px;
  }

  /* ── HERO ────────────────────────────────────────────────── */
  #hero {
    padding: 0;
    overflow: hidden;
  }

  .hero-wordmark {
    font-size: clamp(2.8rem, 18vw, 5.5rem);
  }

  .hero-corner-quote {
    bottom: 20px;
    font-size: 11px;
    width: min(240px, calc(100% - 32px));
  }

  #start-btn {
    padding: 0.85rem 2rem;
    bottom: 140px;
  }

  /* ── HEX MENU ────────────────────────────────────────────── */
  .menu-heading {
    top: 88px;
    padding: 0 16px;
  }

  .menu-heading h2 {
    font-size: clamp(21px, 6vw, 32px);
    margin: 8px 0;
  }

  .menu-heading p {
    font-size: 11px;
  }

  /* Scale down hex nodes */
  .hex-node {
    width: 98px;
    height: 113px;
  }

  .hex-centre {
    width: 98px;
    height: 113px;
  }

  .hex-label {
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .hex-number {
    font-size: 6.5px;
    letter-spacing: 0.1em;
  }

  .hex-icon {
    font-size: 20px;
  }

  #hex-menu .hex-icon {
    width: 26px;
    height: 26px;
  }

  #hex-menu .hex-icon svg {
    width: 23px;
    height: 23px;
  }

  #hex-menu .hex-bee-icon {
    width: 38px;
    height: 38px;
  }

  .hex-centre-label {
    font-size: 6px;
  }

  /* Honeycomb ring positions recalculated for 98px hex nodes */
  #hex-about        { transform: translate(-104px, 35px); }
  #hex-skills       { transform: translate(-52px, -62px); }
  #hex-experience   { transform: translate(52px,  -62px); }
  #hex-projects     { transform: translate(104px,  35px); }
  #hex-publications { transform: translate(52px,  132px); }
  #hex-contact      { transform: translate(-52px, 132px); }

  .menu-footnote {
    font-size: 7.5px;
    letter-spacing: 0.14em;
    bottom: 3vh;
  }

  /* ── GLASS PANEL / SECTION PANEL ───────────────────────────── */
  #panel-content {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 7.5rem);
    padding: 1.5rem 1.1rem 1.25rem;
    border-radius: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    max-height: none;
  }

  #panel-content::before {
    margin: -1.5rem -1.1rem 1.25rem;
  }

  /* Back button: below the glass box, centered */
  #panel-back-btn {
    top: calc(50% + (100dvh - 7.5rem) / 2 + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  }

  /* ── SHARED PANEL TEXT ──────────────────────────────────────── */
  .panel-title {
    font-size: clamp(1.6rem, 7vw, 2.5rem);
  }

  .section-deck {
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
  }

  .hive-eyebrow {
    font-size: 9px;
  }

  /* ── ABOUT ──────────────────────────────────────────────────── */
  .panel-about-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-bio {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
  }

  .panel-photo-wrap {
    align-self: center;
    width: 180px;
    height: 207px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  .panel-portrait {
    width: 170px;
  }

  /* 2-column cert grid on mobile */
  .panel-cert-btn {
    width: calc((100% - 12px) / 2);
    height: auto;
    aspect-ratio: 1.45;
  }

  /* ── SKILLS ─────────────────────────────────────────────────── */
  .panel-skills-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .skill-badges-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ── EXPERIENCE ─────────────────────────────────────────────── */
  .panel-internship-grid {
    grid-template-columns: 1fr;
  }

  .panel-exp-header {
    flex-direction: column;
    gap: 0.4rem;
  }

  .panel-exp-period {
    white-space: normal;
    font-size: 0.7rem;
  }

  .panel-exp-bullets li {
    font-size: 0.82rem;
  }

  /* ── PROJECTS ───────────────────────────────────────────────── */
  .panel-projects-grid .panel-project-card {
    flex-direction: column !important;
    min-height: unset !important;
  }

  /* Thumbnail moves to the top */
  .panel-project-visual {
    order: -1;
    flex: 0 0 155px !important;
    width: 100% !important;
    height: 155px;
    border-left: none;
    border-bottom: 1px solid rgba(240, 184, 76, 0.22);
  }

  .panel-project-body {
    padding: 1.1rem 1rem;
    gap: 0.55rem;
  }

  .panel-project-title {
    font-size: 1rem !important;
  }

  .panel-project-tagline {
    font-size: 0.78rem;
  }

  .panel-project-bullets li {
    font-size: 0.76rem;
  }

  .panel-project-topline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .panel-project-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* ── PUBLICATIONS ───────────────────────────────────────────── */
  .panel-pub-card {
    padding: 1.25rem;
  }

  /* Reset hex-clip badge to a simple pill on mobile */
  .panel-pub-badge {
    clip-path: none;
    width: auto;
    height: auto;
    padding: 0.25rem 0.65rem;
    border-radius: 3px;
    font-size: 0.68rem;
    display: inline-block;
  }

  .panel-pub-title {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  }

  .panel-pub-author-list li {
    font-size: 0.78rem;
  }

  /* ── CONTACT ─────────────────────────────────────────────────── */
  .panel-contact-intro {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
  }

  .panel-contact-item {
    padding: 0.85rem 1rem;
    font-size: 0.83rem;
    border-radius: 8px;
    border-width: 1px;
    background: rgba(255, 255, 255, 0.04);
  }

  .panel-contact-item::after {
    font-size: 16px;
  }

  /* Simplify hex-clip icon to a rounded box for mobile */
  .panel-contact-icon {
    clip-path: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(240, 184, 76, 0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── SECTION-NEXT BUTTON ─────────────────────────────────────── */
  .section-next {
    font-size: 18px;
    padding: 18px 0;
    margin-top: 2rem;
  }

  .section-next > span:last-child {
    width: 42px;
    height: 48px;
  }
}

/* ─── Very small phones (≤ 375px) ───────────────────────────── */
@media (max-width: 375px) {
  .hex-node {
    width: 86px;
    height: 99px;
  }

  .hex-centre {
    width: 86px;
    height: 99px;
  }

  #hex-about        { transform: translate(-92px,  30px); }
  #hex-skills       { transform: translate(-46px, -54px); }
  #hex-experience   { transform: translate(46px,  -54px); }
  #hex-projects     { transform: translate(92px,   30px); }
  #hex-publications { transform: translate(46px,  114px); }
  #hex-contact      { transform: translate(-46px, 114px); }

  .panel-project-visual {
    height: 130px;
  }

  #panel-content {
    padding: 1.25rem 0.9rem 1rem;
  }
}

/* ─── Landscape phone (short viewport) ──────────────────────── */
@media (max-width: 768px) and (max-height: 500px) {
  #panel-content {
    height: calc(100dvh - 3rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #panel-back-btn {
    top: calc(50% + (100dvh - 3rem) / 2 + 6px);
    left: 50%;
    transform: translateX(-50%);
  }

  /* Allow the hex menu to scroll in landscape */
  #hex-menu {
    overflow-y: auto;
    overflow-x: hidden;
  }
}