/* A compact doorway and open ruled links, using the approved home's recipes. */
.page-social-media {
  min-block-size: 100svh;
  padding-block: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-bottom));
  /* Insets are physical; the larger side keeps this centered column safe in either direction. */
  padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
}
.page-social-media .social-shell { inline-size: min(100%, 36rem); margin-inline: auto; }
.page-social-media :is(a, button) { touch-action: manipulation; }
.page-social-media .social-controls { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-block-end: 1rem; }
.page-social-media :is(.language, .round-control) { min-inline-size: 3rem; min-block-size: 3rem; }
.page-social-media .theme-toggle[hidden] { display: grid !important; visibility: hidden; }
.page-social-media .language { transition: none; }
.page-social-media .social-intro { position: relative; inline-size: min(100% - 1rem, 26rem); margin-inline: auto; padding-block: 1.75rem .75rem; text-align: center; }
.page-social-media .door-halo { --halo-gap: .5rem; }
.page-social-media .door-halo > span { border-color: var(--rule); border-width: 1px; }
.page-social-media .social-logo { inline-size: 5.5rem; margin-inline: auto; }
.page-social-media .social-logo img { inline-size: 100%; aspect-ratio: 490.13 / 547.58; }
.page-social-media .social-tagline { max-inline-size: 30ch; margin: 1.5rem auto 1rem; padding-inline: .5rem; color: var(--muted); font-size: 1.125rem; line-height: 1.5; text-wrap: balance; }
.page-social-media .social-whatsapp { inline-size: calc(100% - 2rem); min-block-size: 3rem; padding: .625rem .75rem; font-size: 1.0625rem; transition: transform .18s var(--ease-out); }
.page-social-media .social-call { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 3rem; margin-block-start: .25rem; padding-inline: .5rem; font-family: "Dubai", sans-serif; font-size: 1.125rem; line-height: 1.5; }
.page-social-media .social-call svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.page-social-media .social-call:hover { text-decoration: underline; }
.page-social-media .social-platforms { margin-block-start: 1rem; border-block-start: 1px solid var(--rule); }
.page-social-media .social-link { display: flex; align-items: center; gap: 1rem; min-block-size: 3.25rem; padding-block: .625rem; padding-inline: .75rem; border-block-end: 1px solid var(--rule); font-size: 1.125rem; line-height: 1.5; transition: transform .18s var(--ease-out); }
.page-social-media .platform-icon { inline-size: 1.375rem; block-size: 1.375rem; flex: none; }
.page-social-media .platform-arrow { inline-size: 1.125rem; block-size: 1.125rem; margin-inline-start: auto; flex: none; }
.page-social-media:dir(ltr) .platform-arrow { transform: scaleX(-1); }
.page-social-media .social-link[href]:hover { background: var(--rule); }
.page-social-media .social-link[aria-disabled="true"] { cursor: default; }
.page-social-media :is(.social-link, .social-whatsapp):is(:active, .is-pressed) { transform: scale(.985); }
.page-social-media .social-home { display: flex; align-items: center; justify-content: center; gap: .5rem; inline-size: fit-content; min-block-size: 3rem; margin: .75rem auto 0; padding-inline: .75rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.page-social-media .social-home svg { inline-size: 1rem; block-size: 1rem; }
.page-social-media .social-home:hover { text-decoration: underline; }
.page-social-media .social-fallback { margin-block: .5rem; text-align: center; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.page-social-media .social-fallback a { display: inline-flex; align-items: center; min-block-size: 3rem; margin-inline: .5rem; text-decoration: underline; }

@media (width >= 48rem) {
  .page-social-media { padding-block: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-bottom)); }
  .page-social-media .social-shell { inline-size: min(100%, 40rem); }
  .page-social-media .social-controls { margin-block-end: 1.5rem; }
  .page-social-media .social-intro { padding-block-start: 2.5rem; }
  .page-social-media .social-logo { inline-size: 7rem; }
  .page-social-media .social-tagline { font-size: 1.25rem; }
  .page-social-media .social-platforms { margin-block-start: 1.75rem; }
  .page-social-media .social-link { min-block-size: 3.5rem; padding-inline: 1.25rem; }
}
@media (width < 48rem) and (prefers-reduced-motion: no-preference) {
  .page-social-media .social-logo,
  .page-social-media .social-tagline,
  .page-social-media .social-whatsapp,
  .page-social-media .social-call,
  .page-social-media .social-link { animation: qn-social-enter .3s var(--ease-out) backwards; }
  .page-social-media .social-tagline { animation-delay: .05s; }
  .page-social-media .social-whatsapp { animation-delay: .1s; }
  .page-social-media .social-call { animation-delay: .15s; }
  .page-social-media .social-link:nth-child(1) { animation-delay: .2s; }
  .page-social-media .social-link:nth-child(2) { animation-delay: .25s; }
  .page-social-media .social-link:nth-child(3) { animation-delay: .3s; }
  .page-social-media .social-link:nth-child(4) { animation-delay: .35s; }
  .page-social-media .social-link:nth-child(5) { animation-delay: .4s; }
  .page-social-media .social-link:nth-child(6) { animation-delay: .45s; }
}
@keyframes qn-social-enter {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-social-media :is(.social-link, .social-whatsapp):is(:active, .is-pressed) { transform: none; }
}