/* Phone refinements and quiet motion, loaded last on every page (build-client-notes.py, with mobile-polish.js).
   On a phone the long homepage blocks fold or become swipeable rows: one language throughout — many alike items
   swipe sideways with the next one peeking in, long copy folds open. Everything stays inside the 20px gutter. */

/* Newsletter band: the same breathing room above and below the card, at every width. */
.newsletter { padding: 56px 0; }
.site-footer .newsletter + .footer-grid { padding-top: 64px; }

/* Page sidebars: the clinic photos are portraits, shown whole (build-clinic-photos.py). */
.article-sidebar .sidebar-photo { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* About page: the painting's face and flowers stay in the frame. */
.about-hero-photo img.about-hero-painting { object-position: center 38%; }

/* Swipeable rows: the bar under the row (count, progress line, arrows) exists only on a phone. */
.swipe-bar { display: none; }
.prevention-track { display: contents; }

@media (max-width: 760px) {
  .newsletter { padding: 40px 0; }
  .site-footer .newsletter + .footer-grid { padding-top: 52px; }

  /* A row that swipes: the next card peeks in at the right edge, the row snaps card by card. */
  .swipe-track {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .swipe-track::-webkit-scrollbar { display: none; }
  .swipe-track > * { scroll-snap-align: start; min-width: 0; }
  .swipe-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  .swipe-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 46px;
    color: var(--navy);
  }
  .swipe-count { min-width: 52px; font: 500 11px/1 var(--sans); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
  .swipe-progress { position: relative; flex: 1; height: 1px; background: #1d2b5226; overflow: hidden; }
  .swipe-progress > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); transition: width .5s cubic-bezier(.16,1,.3,1), left .5s cubic-bezier(.16,1,.3,1); }
  .swipe-buttons { display: flex; gap: 8px; }
  .swipe-buttons button {
    display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 1px solid #cbaf6a99; border-radius: 50%; background: transparent; color: inherit;
    font: 400 16px/1 var(--sans); cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
  }
  .swipe-buttons button:disabled { opacity: .3; cursor: default; }
  .swipe-buttons button:not(:disabled):active { background: #cbaf6a26; }
  /* "Lapozz" hint: the arrow drifts right until the row is first swiped. */
  .swipe-hint {
    position: absolute; right: 0; top: -28px;
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink, #8a6d2c);
    transition: opacity .6s ease;
  }
  .swipe-hint > span { display: inline-block; animation: swipe-drift 1.8s cubic-bezier(.45,0,.2,1) infinite; }
  .swipe-bar { position: relative; }
  .swipe-bar.is-swiped .swipe-hint { opacity: 0; }
  @keyframes swipe-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

  /* Rows on the dark bands. */
  #hiv-megelozes .swipe-bar, #partnereink .swipe-bar { color: #f3efe6; }
  #hiv-megelozes .swipe-progress, #partnereink .swipe-progress { background: #ffffff26; }
  #hiv-megelozes .swipe-hint, #partnereink .swipe-hint { color: #dcc997; }
  #hiv-megelozes .swipe-buttons button:not(:disabled):active, #partnereink .swipe-buttons button:not(:disabled):active { background: #ffffff14; }

  /* Care journey: the photos are portraits, shown whole instead of cut to a short strip. */
  .care-journey .care-image img { height: auto; aspect-ratio: 3 / 4; object-position: center; }

  /* "Miben segíthetünk?": more air between the label, the title, the link and the search. */
  #ellatasok .section-head .eyebrow { margin-bottom: 16px; }
  #ellatasok .section-head h2 { line-height: 1.12; }
  #ellatasok .section-head .text-link { margin-top: 22px; }
  #ellatasok .home-search { margin-top: 44px; margin-bottom: 40px; }
  #ellatasok .home-search-label { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink, #8a6d2c); }
  #ellatasok .home-search-hint { margin-top: 12px; font-size: 12.5px; }

  /* "Rád hangolt ellátás": the eight services fold; the first stays open so the pattern reads at a glance. */
  .benefits-full-list.is-folding li { padding-block: 0; }
  .benefits-full-list.is-folding li + li { border-top: 1px solid #ffffff1f; }
  .benefits-overview .benefits-full-list.is-folding li h3 { margin: 0; }
  .benefit-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
    padding: 20px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .benefit-sign { position: relative; flex: none; width: 14px; height: 14px; }
  .benefit-sign::before, .benefit-sign::after {
    content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--gold-light, #d6c086);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .benefit-sign::after { transform: rotate(90deg); }
  .benefit-toggle[aria-expanded="true"] .benefit-sign::after { transform: rotate(0deg); }
  .benefit-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1); }
  .benefit-panel > div { overflow: hidden; }
  .benefit-panel > div > p { margin: 0; padding-bottom: 22px; opacity: 0; transform: translateY(-6px); transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
  li.is-open .benefit-panel { grid-template-rows: 1fr; }
  li.is-open .benefit-panel > div > p { opacity: 1; transform: none; transition-delay: .08s; }
  .benefits-full-list.is-folding .benefit-number { padding-top: 24px; }

  /* PrEP and PEP: two cards side by side in a swipeable row. */
  #hiv-megelozes .prevention-track { display: grid; }
  #hiv-megelozes .prevention-track > .prevention-card { display: flex; flex-direction: column; }
  #hiv-megelozes .prevention-card .prevention-text { flex: 1; }

  /* Infections A–Z: the letters in one line that swipes, fading out at the right edge. */
  .infections-home .infection-jump {
    display: flex !important; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin-inline: 0; padding: 0 28px 0 0;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .infections-home .infection-jump::-webkit-scrollbar { display: none; }
  .infections-home .infection-jump a { flex: none; width: 44px; height: 44px; }
  .infections-home .infection-jump a[aria-current="true"] { background: var(--olive-dark, #1d2b52); border-color: var(--olive-dark, #1d2b52); color: #fdfdfc; }
  .infections-home .infection-strip.swipe-track { grid-auto-columns: 84%; }

  /* Awards larger and even; partners in one swipeable row of equal frames. */
  #partnereink .awards-group .partner-logos { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
  #partnereink .awards-group .partner-logo { height: 92px; padding: 0 8px; }
  #partnereink .awards-group .partner-logo img { max-width: 100%; max-height: 82px; }
  #partnereink .collaborators-group .partner-logos.swipe-track { grid-auto-columns: calc((100% - 28px) / 2.4); gap: 14px; justify-content: start; justify-items: stretch; }
  #partnereink .collaborators-group .swipe-track .partner-logo {
    display: grid; place-items: center; width: 100%; max-width: none; height: 96px; margin: 0; padding: 16px;
    border: 1px solid #d6c08640; background: #ffffff08;
  }
  #partnereink .collaborators-group .swipe-track .partner-logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; }

  /* Footer: contact first, the two link lists side by side, the small print centred. */
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; padding-bottom: 40px; }
  .site-footer .footer-brand, .site-footer .footer-contact { grid-column: 1 / -1; }
  .site-footer .footer-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 22px; }
  .site-footer .footer-brand .brand img { width: 150px; }
  .site-footer .footer-brand p { grid-column: 1 / -1; margin-top: 4px; max-width: none; }
  .site-footer .footer-social { grid-column: 1 / -1; margin-top: 0; }
  .site-footer .footer-contact { padding: 26px 0; border-block: 1px solid #ffffff1a; }
  .site-footer .footer-heading, .site-footer .footer-col .footer-heading { margin-bottom: 12px; }
  .site-footer .footer-col { gap: 4px; }
  .site-footer .footer-col a { padding: 4px 0; font-size: 13.5px; line-height: 1.5; }
  .site-footer .footer-bottom { align-items: center; text-align: center; gap: 8px; padding: 24px 0 30px; }
  .site-footer .footer-bottom .cookie-footer { text-align: center; }

  /* Specialists and staff directory: an editorial two-column grid of portraits. Each card is one link to the
     profile, where the hours and booking are; the field filter above stays. */
  .team-page .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; max-width: none; }
  .team-page .team-card { position: relative; border: 0; background: none; }
  .team-page .team-photo img { aspect-ratio: 4 / 5; }
  .team-page .team-card-staff .team-photo img { aspect-ratio: 4 / 5; }
  .team-page .team-body, .team-page .team-card-staff .team-body { padding: 14px 2px 0; }
  .team-page .team-card p.team-tag {
    margin: 0 0 7px; font-size: 9px; line-height: 1.5; letter-spacing: .14em; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .team-page .team-card h3, .team-page .team-card-staff h3 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: break-word; }
  .team-page .team-card:not(.team-card-staff) .team-role, .team-page .team-card:not(.team-card-staff) .team-foot { display: none; }
  .team-page .team-card-staff p.team-role { margin-top: 6px; font-size: 11.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .team-page .team-card h3 a::after { content: ""; position: absolute; inset: 0; }
  .team-page .team-card h3 a:focus-visible { outline: none; }
  .team-page .team-card:has(h3 a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
  .team-page .team-card .team-photo img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
  .team-page .team-card:active .team-photo img { transform: scale(1.03); }

  /* Back to top: tucked away while reading down, back as soon as the reader scrolls up. */
  .back-to-top { transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, background .2s; }
  .back-to-top.is-tucked { opacity: 0; transform: translateY(14px); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-hint > span { animation: none; }
  .benefit-panel, .benefit-panel > div > p, .benefit-sign::before, .benefit-sign::after,
  .swipe-progress > span, .back-to-top { transition: none !important; }
}