/*
  responsive.css - Media queries and responsive styles for adapting the application to different screen sizes and devices.
*/

/* ============================================= @media (min-width:300px) ═══  Galaxy S8+ baseline  ============================================= */
@media (min-width: 18.75em) {
  :root {
    --gw: calc(1vw * (360 / 100));
  } /* 360 css-px → 100 gw */
}

/* =============================================  Fluid overrides  ============================================= */

/* Inputs */
.fixed-input {
  width: clamp(220px, 75%, 340px);
  height: 2.8rem;
}

/* Thumbnails in module cards */
.module-card img {
  width: clamp(56px, 22vw, 96px);
  height: auto;
}

/* Bottom navigation bar */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  padding-inline: 4vw;
}
.bottom-bar .nav-icon {
  margin-right: 0;
}

/* Atoms-page vertical buttons */
.top-right-icons {
  position: fixed;
  top: 8vh;
  right: 4vw;
  left: auto;
  margin: 0;
  gap: 2vh;
}

/* Fluid type scale */
h1 {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
}
h3 {
  font-size: clamp(0rem, 3.8vw, 1.4rem);
}
button,
select,
input {
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
}

/* ============================================= Breakpoints ============================================= */
/* phone */
@media (max-width: 37.5em) {
  body {
    font-size: 1rem;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .lang-install__body {
    margin-top: 93px;
  }

  .onboarding-container {
    margin-top: 14vh;
  }
}

@media (min-width: 48em) {
  #onboarding .container,
  #introPage .container,
  #proInterestPage .container,
  .onboarding-container,
  .intro-container,
  .interest-container {
    padding-top: 0 !important;
  }

  .onboarding-container,
  .intro-container,
  .interest-container {
    margin-top: clamp(96px, 12vh, 160px) !important;
  }
}

@media (min-width: 56.25em) {
  .container {
    /*max-width: 76vw;*/
    margin: 0 auto;
  }
}

/* ============================================= Desktop 1024px: make cards bigger (taller) and prevent over-stretching =============================================*/
@media (min-width: 1024px) {
  #categoryCarousel {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 27px 0;
  }

  #categoryCarousel .category-card {
    max-width: 260px;
    margin: 0 auto;
    overflow: hidden;
  }

  #categoryCarousel .category-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .pupils-container {
    max-width: 76vw;
  }

  #pupilsPage .pupil-card {
    margin-left: -2%;
  }

  #pupilsPage .lesson-type,
  .lesson-meta {
    margin-top: 5vh;
  }

  #pupilsPage .lesson-progress {
    margin-top: 2%;
  }

  #pupilsPage .lesson-cta {
    margin-top: 47%;
  }

  #pupilsPage .lesson-main {
    margin-top: -2vh;
    margin-left: -1vh;
  }

  #pupilsPage .thumb {
    width: 5vw;
    height: 4vh;
  }

  .container {
    padding: -2vw;
  }

  .lang-install__modal {
    width: 340px; /* unchanged */
    padding: 24px 28px; /* unchanged */
  }

  :root {
    --container-w: 92vw;
  }

  .category-carousel {
    grid-auto-columns: 21%;
  }

  #eyesCatalogPage .eyes-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 92%;
    height: 62px;
    padding: 0 20px 0 74px;
    margin: 0;
  }

  #backtnGlobal.top-back {
    margin-left: -22px;
  }
}

/* ============================================= XL desktop: no-crop mode (full image visible) ============================================= */
@media (min-width: 1440px) {
  #categoryCarousel .category-card {
    background: #fff;
  }
  #categoryCarousel .category-card img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
    width: 100%;
  }

  .search-icon svg,
  .menu-search-icon svg {
    width: 22px;
    height: 22px;
  }

  .eyes-carousel {
    grid-auto-columns: 16%;
  }

  .menu-panel {
    width: 220px;
    margin-top: 1%;
  }
  .menu-close {
    font-size: 28px;
    top: 14px;
    right: 14px;
  }

  .pupils-container {
    max-width: 37vw;
  }

  #pupilsPage .pupil-card {
    margin-left: -2%;
  }

  #pupilsPage .lesson-type,
  .lesson-meta {
    margin-top: 5vh;
  }

  #pupilsPage .lesson-progress {
    margin-top: 2%;
  }

  #pupilsPage .lesson-cta {
    margin-top: 45%;
  }

  #pupilsPage .lesson-main {
    margin-top: -1vh;
    margin-left: -1vh;
  }

  #pupilsPage .thumb {
    width: 3vw;
    height: 4vh;
  }

  .category-card__title {
    left: 42px;
  }

  .unified-container {
    max-width: 76vw;
    margin-top: -9vh;
  }

  .lang-install__modal {
    width: 340px; /* unchanged */
    padding: 24px 28px; /* unchanged */
  }

  :root {
    --container-w: 91vw;
  }

  .category-carousel {
    grid-auto-columns: 26%;
  }

  #eyesCatalogPage .eyes-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 92%;
    height: 62px;
    padding: 0 20px 0 136px;
    margin: 0;
  }

  #backtnGlobal.top-back {
    margin-left: -80px;
  }
}

/* ============================================= Tablets 768px ============================================= */
@media (min-width: 768px) {
  .eyes-card {
    height: 148px !important; /* restore the compact size you liked */
    width: 224px;
    padding: 25px 18px !important; /* keep your original internal spacing */
    position: relative;
    overflow: hidden;
    border-radius: 18px;
  }

  .eyes-card .eyes-card__bg {
    position: absolute; /* keep as background layer */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* show entire artwork */
    background: #f5f5f5; /* subtle letterbox fill */
    border-radius: inherit;
    pointer-events: none; /* don’t block clicks on overlays */
  }

  /* Ensure overlays stay visible atop the image */
  .eyes-card .heart-btn,
  .eyes-card .tag-row,
  .eyes-card .eyes-card__title {
    position: absolute;
    z-index: 2;
  }

  .search-icon svg,
  .menu-search-icon svg {
    width: 20px;
    height: 20px;
  }
  .eyes-carousel {
    grid-auto-columns: 29%;
  }

  .menu-panel {
    position: relative;
    width: min(58vw, 220px);
    margin-top: 3%;
  }

  .menu-close {
    top: -2px;
    left: 106px;
    font-size: min(6vw, 28px);
    z-index: 11000;
  }

  .ml-chip-row {
    margin: 0 auto;
  }

  .container {
    padding: 7vw;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .eyes-carousel {
    gap: 61px;
  }

  .container {
    padding-top: 3%;
  }
}

/* Base (mobile-first): compact */
.lang-install__modal {
  width: min(286px, 90vw);
  padding: 20px 22px;
}

/* ≥ 480px: a bit wider */
@media (min-width: 480px) {
  .lang-install__modal {
    width: min(286px, 90vw);
    padding: 22px 24px;
  }
}

/* Optional: tighten select on very small screens */
@media (max-width: 360px) {
  #languagePickerSelect.lang-install__select {
    font-size: 12px;
    padding: 8px 32px 8px 10px;
  }
}

/* Moved from: public/AnteriorSegmentQuiz/html/theme.css */
@media (max-width: 420px) {
  .card {
    border-radius: 16px;
    padding: 23px;
    height: 552px;
  }
}

/* Moved from: public/style/base.css */
@media (prefers-reduced-motion: reduce) {
  .logo-one {
    animation: none !important;
  }
}

/* Moved from: public/style/components.css */
@media (max-width: 360px) {
  .ml-grid {
    grid-template-columns: 1fr;
  }
}

/* Moved from: public/style/components.css */
@media (min-width: 480px) {
  .ml-masonry {
    column-count: 3;
  }
}

/* Moved from: public/style/components.css */
@media (max-width: 340px) {
  .pupil-card {
    padding: 14px 12px;
  }
  .lesson-row {
    grid-template-columns: 46px 1fr auto;
  }
  .lesson-row .thumb {
    width: 46px;
    height: 32px;
  }
}

/* Moved from: public/style/components.css */
@media (min-width: 1080px) {
  :root {
    --container-w: 84vw;
  }
}

/* Moved from: public/style/pages.css */
@media (max-width: 420px) {
  .onboarding-container {
    padding-bottom: 100%;
  }
}

/* Moved from: public/style/pages.css */
@media (max-width: 420px) {
  .intro-container {
    padding-bottom: 120px;
    padding-top: 17%;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .lang-install__body {
    margin-top: 93px;
  }
}

/* Moved from: public/style/pages.css */
@media (min-width: 480px) {
  .category-carousel {
    grid-auto-columns: 29%;
  }
}

/* Moved from: public/style/pages.css */
@media (min-width: 480px) {
  #likedList {
    grid-template-columns: 1fr 1fr;
  }
}

/* Moved from: public/style/pages.css */
@media (max-width: 360px) {
  #likedList {
    grid-template-columns: 1fr;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .lang-install__body {
    margin-top: 93px;
  }
}

/* Moved from: public/style/pages.css */
@media (min-width: 480px) {
  .ml-masonry {
    column-count: 3;
  }
}

/* Moved from: public/style/pages.css */
@media (max-width: 340px) {
  .pupil-card {
    padding: 14px 12px;
  }
  .lesson-row {
    grid-template-columns: 46px 1fr auto;
  }
  .lesson-row .thumb {
    width: 46px;
    height: 32px;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .lang-install__body {
    margin-top: 93px;
  }
}

/* Moved from: public/style/pages.css */
@media (min-width: 401px) {
  #onboarding .container,
  #proInterestPage .container,
  #introPage .container {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
  }

  .onboarding-container,
  .interest-container,
  .intro-container {
    width: 70% !important;
    max-width: 420px !important;
    padding: 0 20px !important;

    /* use one shared value for all three */
    margin: clamp(96px, 12vh, 160px) auto 0 !important;
    text-align: left;
  }

  /* keep these neutral */
  .intro-container {
    min-height: 0 !important;
  }
  .interest-container {
    padding-bottom: 0 !important;
  }
}

/* Moved from: public/subapp/Cataract/style.css */
@media (min-width: 600px) {
  .button-group button {
    max-width: 150px;
  }
}

/* Moved from: public/subapp/Mires/styles.css */
@media (min-width: 600px) {
  #appBar h1 {
    font-size: 30px;
  }

  #infoContainer {
    top: 85px;
    left: 30px;
  }

  /* Keep 4 slider pinned to bottom on larger screens */
  #sliderContainer {
    bottom: 15px;
    right: 30px;
  }

  /* Keep vertical slider pinned to right on larger screens */
  #separationSliderContainer {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  #blueCircle {
    width: 300px;
    height: 300px;
  }

  #mires {
    width: 250px;
    height: 200px;
  }

  svg {
    width: 200px;
    height: 200px;
  }

  .info-icon {
    width: 13px;
    height: 13px;
  }
}

/* Moved from: public/subapp/Mires/styles.css */
@media (min-width: 600px) {
  #infoContainer {
    top: 105px; /* adjusted value for larger screens */
    left: 30px;
  }
}

/* Moved from: public/subapp/Squint/style.css */
@media screen and (max-width: 480px) {
  .slider-wrapper {
    width: 100%;
  }

  #backBtnGlobal::before {
    width: 24px;
    height: 23px;
  }

  .unified-top .icon {
    font-size: 21px;
  }

  .eyes-top .icon {
    font-size: 21px;
  }

  .lang-install__body {
    margin-top: 93px;
  }
}