/* page-landing.css
   CSS das landings do QR. Partilhado por bem-vindo.html (PT) e welcome.html (EN)
   — uma só fonte, para não divergirem. */

  .welcome {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 40px var(--gutter) 48px;
    position: relative;
    overflow: hidden;
    background-image:
      linear-gradient(to bottom,
        color-mix(in oklab, var(--bg) 78%, transparent) 0%,
        var(--bg) 62%),
      url("images/bodeguita_1.jpg");
    background-size: cover;
    background-position: center;
  }
  .welcome > * { position: relative; z-index: 1; }

  .welcome-top {
    display: flex;
    justify-content: center;
    padding: 8px 0 48px;
  }
  .welcome-hero { text-align: center; margin: auto 0; }
  .welcome .eyebrow {
    display: block;
    margin-bottom: 22px;
    color: var(--accent);
  }
  .welcome h1 {
    font-family: var(--serif);
    font-size: clamp(52px, 13vw, 104px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin: 0 0 24px;
    text-wrap: balance;
  }
  .welcome h1 em { font-style: italic; color: var(--accent); }
  .welcome-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 42ch;
    margin: 0 auto 44px;
  }

  /* Action grid */
  .welcome-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
  .wa-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: var(--ink);
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
    min-height: 128px;
    justify-content: space-between;
  }
  .wa-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  }
  .wa-card .wa-ico {
    width: 26px;
    height: 26px;
    color: var(--accent);
  }
  .wa-card .wa-ico svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .wa-card .wa-body { display: flex; flex-direction: column; gap: 5px; }
  .wa-card .wa-title {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.05;
  }
  .wa-card .wa-sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wa-card.is-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; padding: 20px 22px; }
  .wa-card.is-wide .wa-ico { flex-shrink: 0; }
  .wa-card.is-wide .wa-body { display: flex; flex-direction: column; gap: 4px; }
  .wa-card.is-wide .wa-arrow { margin-left: auto; color: var(--ink-3); font-size: 20px; transition: transform .3s var(--ease), color .3s var(--ease); }
  .wa-card.is-wide:hover .wa-arrow { color: var(--accent); transform: translateX(4px); }

  .welcome-foot {
    text-align: center;
    margin-top: 44px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.8;
  }
  .welcome-foot a { color: var(--ink-2); text-decoration: none; }
  .welcome-foot a:hover { color: var(--accent); }
  /* Esta página é lida ao telemóvel (é o destino do QR): os alvos de toque
     têm de ter 44px. O padding cresce a área tocável sem mudar o texto. */
  .welcome-foot > a[href^="tel:"] {
    display: inline-block;
    padding: 14px 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .welcome-lang {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .welcome-lang a {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .welcome-lang a.is-current { color: var(--accent); }
  .welcome-lang .sep { color: var(--line-2); }

  @media (max-width: 420px) {
    .welcome-actions { grid-template-columns: 1fr; }
  }