/* ==========================================================================
   responsive.css
   Desktopdesignen är utgångspunkten. Här anpassas layouten nedåt:
   laptop -> surfplatta -> mobil.

   Filen laddas SIST av alla CSS-filer så att dessa regler vinner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAPTOP — max 1200px
   Karusellens sidokort flyttas närmare mitten så de inte hamnar utanför.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .project-card[data-offset='1']  { transform: translateX(300px)  scale(0.8) rotateY(-14deg); }
  .project-card[data-offset='-1'] { transform: translateX(-300px) scale(0.8) rotateY(14deg); }
  .project-card[data-offset='2']  { transform: translateX(500px)  scale(0.6) rotateY(-22deg); }
  .project-card[data-offset='-2'] { transform: translateX(-500px) scale(0.6) rotateY(22deg); }

  .status-card__column {
    padding: 0 22px;
  }
}

/* --------------------------------------------------------------------------
   SURFPLATTA — max 1024px
   Om-sektionen staplas och statuskortet blir tvåspaltigt.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .about-section__inner {
    flex-direction: column;
  }

  .about-section__media,
  .about-section__text {
    flex: 1 1 100%;
    max-width: 620px;
  }

  .about-section__portrait {
    max-height: 52vh;
  }

  /* Statuskortet blir två kolumner: roll och status överst,
     fokusområden får en egen rad under. */
  .status-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }

  .status-card__column:nth-child(3) {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid oklch(0.4 0.02 258 / 0.28);
    padding-top: 24px;
  }

  .project-card {
    width: 360px;
  }

  .project-card[data-offset='1']  { transform: translateX(250px)  scale(0.78) rotateY(-14deg); }
  .project-card[data-offset='-1'] { transform: translateX(-250px) scale(0.78) rotateY(14deg); }

  /* De yttersta korten tar bara plats — dölj dem här. */
  .project-card[data-offset='2'],
  .project-card[data-offset='-2'] {
    opacity: 0;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   MOBIL — max 860px
   Samma brytpunkt som designen använder för att växla till mobilläge.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* --- Navigation: menyn ersätts av hamburgerknappen --- */
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .header-right {
    gap: 18px;
  }

  /* --- Hero: släpp den höga minimihöjden så texten får plats --- */
  .hero,
  .project-hero {
    min-height: 0;
    height: auto;
    min-height: 100svh;
  }

  .hero__content {
    padding-top: 100px;
  }

  /* --- Karusell: bara det aktiva kortet visas, sida vid sida-effekten
         fungerar inte på en smal skärm --- */
  .projects-section {
    padding: 110px 20px 70px;
  }

  .project-carousel {
    height: 440px;
  }

  .project-card {
    width: 84vw;
    max-width: 400px;
  }

  .project-card[data-offset='0'] {
    transform: translateX(0) scale(1) rotateY(0deg);
  }

  .project-card:not([data-offset='0']) {
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) scale(0.8);
    z-index: 1;
  }

  /* --- Projekthero: intro och Översikt staplas med luft emellan --- */
  .project-hero {
    height: auto;
    max-height: none;
    padding-bottom: 40px;
  }

  /* MOBIL BILDBEHANDLING
     På desktop fyller artworken hela heron med object-fit: cover. På en smal,
     hög mobilskärm skulle samma crop förstora bilden så kraftigt att bara en
     detalj syns — symbol och wordmark hamnar utanför kanterna.

     På mobil läggs artworken därför in i det vanliga flödet med sin naturliga
     höjd och full bredd. Hela motivet syns, bildförhållandet är orört och
     inget beskärs. Hero-bakgrunden (den mörka projektfärgen) fyller resten. */
  .project-page .project-hero__image {
    position: relative;
    height: auto;
    object-fit: contain;
    object-position: 50% 50%;
    transform: none;
  }

  /* Plats för den fasta toppmenyn ovanför artworken. */
  .project-hero {
    padding-top: var(--header-height);
  }

  /* Introtexten följer direkt efter artworken. */
  .project-hero .project-intro {
    max-width: 100%;
    margin-left: 0;
    padding-top: 30px;
  }

  /* De mörka lagren finns för att göra text läsbar ovanpå en heltäckande
     bild. När artworken inte längre täcker hela ytan behövs de inte —
     de skulle bara lägga en grå slöja över motivet. */
  .project-hero__overlay,
  .project-page .project-hero__tint {
    display: none;
  }

  .project-intro__statement {
    max-width: 100%;
  }

  .project-overview {
    margin-top: 48px;
  }

  /* Statuskortet blir en enda kolumn — inga lodräta linjer kvar. */
  .status-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px;
  }

  .status-card__column {
    padding: 0 12px;
  }

  .status-card__column + .status-card__column {
    border-left: none;
    border-top: 1px solid oklch(0.4 0.02 258 / 0.28);
    padding-top: 28px;
  }

  .status-card__column:nth-child(3) {
    grid-column: auto;
  }

  /* --- Om och kontakt --- */
  .about-section {
    padding: 110px 22px 70px;
  }

  .contact-section {
    min-height: auto;
    padding: 100px 22px 28px;
  }

  /* --- Sektioner på projektsidorna får mindre luft --- */
  .section,
  .section--tall,
  .section--tallest {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Flödespilar pekar nedåt när stegen staplas. */
  .flow {
    flex-direction: column;
  }

  .flow__step {
    white-space: normal;
    text-align: center;
  }

  .flow__step::after {
    content: none;
  }

  /* Två länkar i sidfoten under varandra, båda vänsterställda. */
  .project-footer__link--next {
    text-align: left;
  }

  /* Idag / Vision staplas, och skiljelinjen flyttas från sidan till toppen. */
  .today-vision {
    grid-template-columns: 1fr;
  }

  .today-vision__column {
    padding: 32px 24px;
  }

  .today-vision__column--vision {
    border-left: none;
    border-top: 1px solid oklch(0.4 0.03 258 / 0.3);
  }
}

/* --------------------------------------------------------------------------
   LITEN MOBIL — max 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__content,
  .project-intro,
  .project-overview {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-logo__name {
    display: none;
  }

  .project-card {
    width: 88vw;
  }

  .carousel-controls {
    gap: 18px;
  }

  .image-frame {
    padding: 8px;
    border-radius: 14px;
  }

  .image-frame img {
    border-radius: 10px;
  }

  .contact-section__links {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   BEGRÄNSAD SKÄRMHÖJD — max 1100px hög, desktop
   Projekthjältarna innehåller mycket: intro, Översikt, highlight och
   statuskortet. På en lägre skärm dras luften in något så att allt får
   plats i första vyn. Typsnitt, färger och bildutsnitt rörs inte —
   bara mellanrummen.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-height: 1100px) {
  .project-intro {
    padding-top: clamp(56px, 8.5vh, 88px);
  }

  .project-overview {
    padding-bottom: clamp(24px, 3vh, 40px);
  }

  .project-overview__text {
    margin-bottom: 12px;
  }

  .project-overview__highlight {
    margin-bottom: 16px;
  }

  .status-card {
    padding: 18px 8px;
  }

  .status-card__icon {
    margin-bottom: 10px;
  }

  .status-card__label {
    margin-bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   FAMILJE-STUNDEN — BEGRÄNSAD DESKTOPHÖJD (max 950px)

   Familje-Stunden har mest text av alla projektsidor i heron: både en lång
   introtext och en lång översiktstext, plus highlight och statuskort. Vid
   1440x900 blev innehållet 61px högre än skärmen, så nederkanten av
   statuskortet hamnade utanför första vyn.

   Här dras enbart de vertikala mellanrummen in. Bild, utsnitt, copy,
   typsnittsstorlekar, highlight och statuskortets utseende är orörda.
   Reglerna gäller bara den här sidan och bara på lägre desktopskärmar.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-height: 950px) {
  /* OMNIRA — artworken behöver lyftas mer när skärmen är låg.
     Här räcker inte höjden till för både hela kristallen och ett luftgap
     ner till Översikt. Textens läsbarhet går före, så bilden flyttas upp
     tills "AI OPERATING SYSTEM" ligger fritt ovanför Översikt. Kristallens
     yttersta spets beskärs då något. Endast Omnira påverkas. */
  .project-page--omnira .project-hero__image {
    transform: translateY(-18%);
  }

  .project-page--familje-stunden .project-intro {
    padding-top: clamp(48px, 6vh, 72px);
  }

  .project-page--familje-stunden .project-intro__back {
    margin-bottom: 12px;
  }

  .project-page--familje-stunden .project-intro__category {
    margin-bottom: 10px;
  }

  .project-page--familje-stunden .project-intro__title {
    margin-bottom: 12px;
  }

  .project-page--familje-stunden .project-intro__statement {
    margin-bottom: 12px;
  }

  .project-page--familje-stunden .project-overview__divider {
    margin-bottom: 12px;
  }

  .project-page--familje-stunden .project-overview__text {
    margin-bottom: 8px;
  }

  .project-page--familje-stunden .project-overview__highlight {
    margin-bottom: 12px;
  }

  .project-page--familje-stunden .project-overview {
    padding-bottom: clamp(20px, 2.2vh, 32px);
  }
}

/* --------------------------------------------------------------------------
   LÅG SKÄRM I LIGGANDE LÄGE
   Utan detta blir hero-innehållet hoptryckt på t.ex. en mobil på sidan.
   -------------------------------------------------------------------------- */
@media (max-height: 620px) and (min-width: 861px) {
  .hero,
  .project-hero {
    min-height: 620px;
  }

  .project-intro {
    padding-top: 90px;
  }
}