/* Usar a horizontalidade do ecrã nas páginas de artigo e receita.
   Regra: nada fica encostado à esquerda com meia página vazia ao lado.
   Só a partir de 1100px; abaixo disso não se toca em nada. */
@media (min-width: 1100px) {
  .wrap      { width: min(100% - 96px, 1280px) !important; }
  .wrap-wide { width: min(100% - 96px, 1440px) !important; }

  /* --- nada de limites em ch a deixar branco ao lado --- */
  .hero .sub, .prose p, .lead, .shop-note, .nut-disclaimer,
  .note, .gen-note p, figcaption { max-width: none !important; }

  /* --- herói: título e subtítulo a toda a largura,
         controlos lado a lado em vez de empilhados à esquerda --- */
  .hero .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 4vw, 72px);
    align-items: start;
    grid-auto-flow: row dense;
  }
  .hero .wrap > *            { grid-column: 1 / -1; }   /* por omissão, largura toda */
  .hero .wrap > .servings    { grid-column: 1; max-width: none !important; margin-top: 34px; }
  .hero .wrap > .note        { grid-column: 1; }
  .hero .wrap > .mode-block  { grid-column: 2; margin-top: 34px; }
  .hero .wrap > .actions     { grid-column: 1; }
  /* Medida tipográfica: títulos grandes leem-se mal acima de ~30 caracteres
     por linha. min(100%, Xch) resolve sozinho — no telemóvel ganham os 100%. */
  .hero h1   { margin-top: 18px; max-width: min(100%, 26ch); }
  .hero .sub { margin-top: 24px; }

  /* --- o split das receitas ocupa mesmo a página --- */
  .split { grid-template-columns: 1.15fr 1fr !important; gap: clamp(44px, 4.5vw, 80px) !important; }

  /* --- fotos ---
     Duas regras, e nenhuma delas mexe na imagem:
     1. Nada de object-fit:cover — cortar para encher é truque, não é desenho.
     2. Nada de width:100% — forçar a imagem a encher o contentor estica-a
        e, se o contentor for maior que a foto, ainda a amplia e desfoca.
     As fotos ficam ao tamanho natural, só encolhendo se não couberem.
     A largura da página ganha-se com a organização texto/foto. */
  .hero-photo img, .recipe-photo img, .step-photo img, .photo-pair img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 12px;
  }
  .hero-photo img, .recipe-photo img { max-height: 72vh; }
  .step-photo img { max-height: 60vh; }
  .photo-pair img { max-height: 62vh; }
  .photo-pair { gap: 28px; align-items: start; }

  /* --- foto ao lado do texto a que pertence ---
     No telemóvel .ft-pair é um div comum e as secções empilham-se como sempre:
     esta regra vive toda dentro da media query. */
  .ft-pair {
    display: grid;
    grid-template-columns: minmax(280px, 34%) 1fr;
    gap: clamp(40px, 4vw, 76px);
    align-items: start;
    width: min(100% - 96px, 1280px);
    margin-inline: auto;
  }
  .ft-pair > section { padding-top: 0 !important; padding-bottom: 0 !important; }
  .ft-pair .wrap     { width: 100% !important; }
  .ft-pair .hero-photo img { max-height: 80vh; }   /* enche a coluna só se couber; nunca é ampliada */

  /* --- blocos de dados também crescem --- */
  .nut-table { max-width: none !important; }
  .shop-list, .stackbar-wrap { max-width: none; }
}

@media (min-width: 1700px) {
  .wrap      { width: min(100% - 120px, 1420px) !important; }
  .wrap-wide { width: min(100% - 120px, 1600px) !important; }
  .hero-photo img, .recipe-photo img { max-height: 78vh; }
}