/* FOOD FRIENDS: de pagina achter de oranje Home-kaart voor een speler zonder account (Night Shift E2, staging).
   Alleen opmaak. De gastweergave #friends-guest-block (index.html) krijgt de officiële illustratie
   brand/Characters/foodikuFoodFriends.png als hero; tekst, knoppen, links en hun werking (js/friends.js) zijn
   ongewijzigd. Elke regel is gekoppeld aan #friends-guest-block of aan #screen-friends, zodat de rest van FOODIKU
   (ook de uitnodigingspagina, die dezelfde illustratie en dezelfde tekstklassen gebruikt) er niets van merkt.
   Voor een ingelogde speler is #friends-guest-block verborgen en ziet de pagina eruit zoals voorheen. */

/* Alleen in de gastweergave vult de inhoud het scherm, zodat het blok verticaal kan centreren en de losse
   uitdaging onderaan staat. Voor een ingelogde speler geldt deze regel niet (de opmaak is daar element voor element
   gelijk aan NEXT). :has() wordt in FOODIKU al gebruikt (css/labellab.css); op iOS 15.0-15.3, waar :has() nog niet
   bestaat, staat alles gewoon onder elkaar vanaf de bovenkant, volledig bruikbaar. */
#screen-friends .myfoodiku-content:has(> #friends-guest-block:not(.hidden)) {
  flex: 1 0 auto;
}

#friends-guest-block:not(.hidden) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: auto;
  padding-top: 0.25rem;
  text-align: center;
}

/* Hero: een rustig, warm vlak in de Food Friends-kleur van de oranje Home-kaart (--orange op 12%), zoals de
   Academy-kaart een lichtgroen vlak heeft. Geen rand en geen schaduw: het is geen knop. */
.friends-hero {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: clamp(0.8rem, 2.6vh, 1.4rem) 1rem clamp(0.7rem, 2.2vh, 1.2rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 147, 15, 0.12);
}

/* De officiële illustratie (vierkant, met een lege transparante rand). Het beeldvak heeft de verhouding van de
   twee figuren zelf (1214 x 906); object-fit: cover laat zo alleen de lege rand weg. Beide Oedi's, de high five
   en de schoenen blijven volledig zichtbaar; het bestand zelf is niet aangepast. De breedte groeit met het scherm
   en wordt op lage schermen begrensd door de schermhoogte, zodat de knop bereikbaar blijft. */
.friends-hero-art {
  display: block;
  width: min(100%, 360px, calc(31vh * 1.34));
  height: auto;
  aspect-ratio: 1214 / 906;
  object-fit: cover;
  object-position: 50% 49%;
}

#friends-guest-block .friends-invite-eyebrow {
  font-size: clamp(1.05rem, 5.3vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 0.45rem;
  text-wrap: balance;
}

#friends-guest-block .friends-invite-sub {
  max-width: 30ch;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

/* Inloglink: zelfde groene tekststijl, gecentreerd en met een vingervriendelijk tikvlak (44 px hoog). */
#friends-guest-block .account-link-btn {
  min-height: 44px;
  margin-top: 0.45rem;
  padding: 0.35rem 1rem;
  font-size: 0.92rem;
}

/* De losse uitdaging: rustig onderaan, onder de bestaande stippellijn, met een groter tikvlak. */
#friends-guest-block:not(.hidden) ~ .friends-legacy-section {
  margin-top: 1.5rem;
  padding-top: 0.6rem;
}

#friends-guest-block:not(.hidden) ~ .friends-legacy-section .friends-legacy-link {
  display: inline-block;
  padding: 0.55rem 0.5rem;
  line-height: 1.45;
}

/* Lage schermen (iPhone SE en kleiner): de illustratie iets kleiner en de tussenruimtes iets krapper, zodat de
   knop, de inloglink en de losse uitdaging zonder scrollen in beeld blijven. */
@media (max-height: 700px) {
  .friends-hero {
    margin-bottom: 1rem;
  }

  .friends-hero-art {
    width: min(100%, 360px, calc(28vh * 1.34));
  }

  #friends-guest-block .friends-invite-sub {
    margin-bottom: 1.1rem;
  }

  #friends-guest-block:not(.hidden) ~ .friends-legacy-section {
    margin-top: 0.5rem;
  }
}

@media (max-height: 600px) {
  .friends-hero {
    margin-bottom: 0.9rem;
    padding: 0.6rem 0.75rem 0.5rem;
  }

  .friends-hero-art {
    width: min(100%, calc(25vh * 1.34));
  }
}