/* ==========================================================================
   Leie Folk — the phone layer (06.11.2026)
   --------------------------------------------------------------------------
   Loaded last on every public page, so it wins over the page stylesheets
   without fighting their specificity. Everything here is for small screens
   and touch: tap targets of 40–44px, lists of points that swipe sideways as
   cards instead of running down the page, step chains on one scrolling row,
   compact tiles, and touch feedback where a desktop gets hover.
   ========================================================================== */

@media (max-width:700px){

  /* ------------------------------------------------------------ tap targets */
  .language-switcher-link{min-width:40px;min-height:40px}
  .site-footer .footer-column a{padding:10px 0}
  .footer-brand-email{padding:8px 0}
  :is(.home-more,.process-more,.services-more,.cw-more,.why-more,.business-process-more,.about-history-link,.article-back){padding-top:11px;padding-bottom:11px}
  .registration-test-note a,.admin-login-link,.admin-back-link{display:inline-block;padding:10px 0}
  .registration-home-link{padding:12px 0}

  /* no text below 11px */
  .premium-home .hero-label{font-size:.6875rem}
  .premium-home .home-promise strong{font-size:.6875rem}
  .article-body table th,.article-body .legal-table th{font-size:.6875rem}

  /* ------------------------------------- points that swipe sideways as cards
     Hvorfor Leie Folk (six benefits), Tjenester (five points) and Hvorfor
     Leie Folk for companies (three columns): one card at a time with the next
     one peeking in, instead of a long column of text. */
  :is(.why-benefit-list,.services-points,.cw-columns){
    display:flex;gap:12px;
    margin-left:calc(-1 * var(--page-gutter));margin-right:calc(-1 * var(--page-gutter));
    padding:4px var(--page-gutter) 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--page-gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* a sideways strip must not widen its grid column (and the page) */
    contain:inline-size}
  :is(.why-benefit-list,.services-points,.cw-columns)::-webkit-scrollbar{display:none}
  :is(.why-benefit-list,.services-points,.cw-columns)>li{
    display:block;flex:0 0 84%;scroll-snap-align:start;
    padding:22px 20px 24px;border:1px solid var(--line);border-radius:var(--card-radius);background:#fff}
  :is(.why-benefit-list,.services-points,.cw-columns)>li>span{display:block;margin:0 0 14px;padding:0;font:800 1.5rem/1 var(--serif);letter-spacing:-.03em;color:var(--red)}
  :is(.why-benefit-list,.services-points,.cw-columns)>li::before,
  :is(.why-benefit-list,.services-points,.cw-columns)>li::after{content:none}
  :is(.why-benefit-list,.services-points,.cw-columns) p{max-width:none}

  /* ---------------------------- step chains on one row that scrolls sideways
     "Behov → Søk → …" used to wrap into three ragged lines */
  :is(.why-steps,.cw-steps,.services-steps){
    flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none;contain:inline-size;
    padding:4px 0 8px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  :is(.why-steps,.cw-steps,.services-steps)::-webkit-scrollbar{display:none}
  :is(.why-steps,.cw-steps,.services-steps) li{position:relative;flex:none;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap}
  :is(.why-steps,.cw-steps,.services-steps) li+li{margin-left:24px}
  :is(.why-steps,.cw-steps,.services-steps) li+li::before{position:absolute;left:-17px;top:50%;transform:translateY(-50%)}
  :is(.why-steps,.cw-steps,.services-steps) li:last-child{margin-right:40px}

  /* --------------------------------------------- home: IT areas as 2×3 tiles */
  .premium-home .home-expertise .expertise-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .premium-home .home-expertise .expertise-list a{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 14px}
  .premium-home .home-expertise .expertise-list h3{font-size:.9375rem;line-height:1.3}
  .premium-home .home-expertise .expertise-list p{font-size:.75rem}

  /* closing boxes: two equal buttons side by side */
  .about-purpose-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;width:100%}
  .about-purpose-actions>a{min-width:0;padding-left:12px;padding-right:12px;text-align:center;justify-content:center}

  /* closing boxes on the inner pages: two buttons in a row whose labels
     no longer touch the edges */
  :is(.process-cta-actions,.business-process-cta-actions,.services-cta-actions,.cw-cta-actions,.team-cta-actions,.it-areas-cta-actions,.about-purpose-actions)>a{
    padding-left:10px;padding-right:10px;font-size:.875rem;line-height:1.25;white-space:normal;text-align:center}

  /* registration: the form starts at the top instead of floating mid-screen,
     and the role cards stack icon and title so a three-line title fits */
  .registration-content{justify-content:flex-start}
  .registration-role-card{min-height:0;justify-content:flex-start;gap:14px}
  .registration-role-card .role-icon{position:static}

  /* --------------------------------------- Våre IT-områder: "Les mer" toggle
     contact.js marks each area's text; on a phone only the first paragraph
     shows until "Les mer" is tapped */
  .it-area-copy.is-collapsed p:not(:first-child){display:none}
  .it-area-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:10px 0;border:0;background:none;color:var(--ink);font:600 .875rem/1.2 var(--sans);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
}
.it-area-more{display:none}
@media (max-width:700px){.it-area-more{display:inline-flex}}

/* ------------------------------------------------- touch: feedback on press
   Phones get no hover, so cards and buttons answer the finger instead */
@media (hover:none){
  :is(a,button,summary){-webkit-tap-highlight-color:transparent}
  :is(.button,.start-button,.login-button,.hero-actions a,.mm-join,.mm-login,.registration-primary,
      .team-card,.about-overview-card,.service-model-card,.article-card,.expertise-list a,.cw-models article,
      .why-benefit-list>li,.services-points>li,.cw-columns>li,.team-roles-steps>li,.contact-option){
    transition:transform .15s ease,background-color .15s ease}
  :is(.button,.start-button,.login-button,.hero-actions a,.mm-join,.mm-login,.registration-primary):active{transform:scale(.97)}
  :is(.team-card,.about-overview-card,.service-model-card,.article-card,.expertise-list a,.cw-models article,.contact-option):active{transform:scale(.985)}
  :is(.premium-home .faq-list,.services-faq-list,.why-faq-list) summary:active{background:#e9f0f8}

  /* Våre IT-områder: the role chips send their wave once, as each area
     scrolls into view (contact.js adds .chips-wave) */
  .it-area.chips-wave .it-area-profiles li{animation:lf-chip-wave .7s ease calc(var(--i,0) * 80ms)}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  :is(.button,.start-button,.login-button,.hero-actions a,.mm-join,.mm-login,.registration-primary,
      .team-card,.about-overview-card,.service-model-card,.article-card,.expertise-list a,.cw-models article,.contact-option):active{transform:none}
  .it-area.chips-wave .it-area-profiles li{animation:none}
}