/* Mamma Donella: /grupos (owner: page-grupos). Needs tokens.css and site.css; never redefines a token or a shared
   class. The opening hangs the page's one gold frame on the terracota wall; «Onde cabe o grupo» is the castanho
   field with the two houses; the values only the owner can give are tags «a confirmar com a casa»; the request
   form sits on paper, one column, fields as wide as what goes in them. */

/* ---------- the opening: text on cream, the wall to the right edge from 64em ---------- */

.abertura-grupos { display: grid; container-type: inline-size; }
.abertura-grupos__texto { padding: var(--md-s-section) var(--md-s-gutter) var(--md-s-7); max-width: calc(36em + 2 * var(--md-s-gutter)); }
.abertura-grupos__parede { padding-block: var(--md-s-7) var(--md-s-8); }
.abertura-grupos__parede > .md-frame { width: min(100%, 36rem); --md-tilt: 0.9deg; }

@media (min-width: 64em) {
  .abertura-grupos { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  .abertura-grupos__texto {
    align-self: center; max-width: none;
    padding-block: var(--md-s-9);
    /* the left edge of .wrap, so the title lines up with the sections below */
    padding-left: calc(max(0px, (100cqw - var(--wrap)) / 2) + var(--md-s-gutter));
    padding-right: var(--md-s-7);
  }
  .abertura-grupos__parede { padding: var(--md-s-8) var(--md-s-7) var(--md-s-9); align-content: center; }
}

/* ---------- the values only the owner can give ---------- */

/* rótulo and valor; the value is a tag in the house's dashed line, italic, never a number made up to fill it */
.ficha { margin: 0; display: grid; }
.ficha__linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--md-s-2) var(--md-s-4); padding-block: var(--md-s-3); border-top: 1px solid var(--md-rule); }
.ficha__linha:last-child { border-bottom: 1px solid var(--md-rule); }
.ficha dt { font-weight: 500; min-width: 0; flex: 1 1 14rem; }
.ficha dd { margin: 0; flex: none; }
.ficha__pendente {
  display: inline-block; padding: 1px 8px;
  border: 1px dashed currentColor; border-radius: var(--md-r-button);
  font-size: var(--md-t-small); line-height: 1.5; font-style: italic; color: var(--md-text-muted);
  white-space: nowrap;
}

/* ---------- «Onde cabe o grupo»: the castanho field ---------- */

.casas-grupo .h2 { max-width: 18ch; }
.casas-grupo__lista { display: grid; gap: var(--md-s-8); margin-top: var(--md-s-7); }
.casa-grupo { display: grid; gap: var(--md-s-6); align-items: center; }
.casa-grupo__foto { width: min(100%, 34rem); }
.casa-grupo:nth-child(1) .casa-grupo__foto { --md-tilt: -1.1deg; }
.casa-grupo:nth-child(2) .casa-grupo__foto { --md-tilt: 0.7deg; justify-self: end; }
.casa-grupo__texto { display: grid; gap: var(--md-s-4); justify-items: start; max-width: 32rem; }
.casa-grupo__texto .ficha { width: 100%; margin-top: var(--md-s-2); }
.casa-grupo__texto .ligacao { margin-top: var(--md-s-2); padding-block: 10px; }
.ficha--comum { margin-top: var(--md-s-8); max-width: 44rem; }

@media (min-width: 48em) {
  .casa-grupo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--md-s-7); }
  .casa-grupo--inversa .casa-grupo__foto { order: 2; }
  .casa-grupo:nth-child(2) .casa-grupo__foto { justify-self: auto; }
}
@media (min-width: 64em) {
  .casas-grupo__lista { gap: var(--md-s-9); }
  .casa-grupo { gap: var(--md-s-8); }
}

/* ---------- «Menu de grupo» ---------- */

.menu-grupo__grelha { display: grid; gap: var(--md-s-5); }
.menu-grupo__corpo { display: grid; gap: var(--md-s-5); max-width: 40rem; }
.menu-grupo__corpo .ficha { margin-top: var(--md-s-2); }
@media (min-width: 64em) {
  .menu-grupo__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--md-s-8); align-items: start; }
}

/* ---------- the request: paper, one column ---------- */

.pedido { scroll-margin-top: var(--md-s-4); border-top: 1px solid var(--md-rule); }
/* the title beside the form from 64em, on the same 5 : 7 grid as «Menu de grupo» above it */
.pedido__caixa { display: grid; gap: var(--md-s-6); }
.pedido__caixa > .h2 { max-width: 14ch; }
.pedido__caixa > .pedido__enviado { grid-column: 1 / -1; max-width: 44rem; }
@media (min-width: 64em) {
  .pedido__caixa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--md-s-8); align-items: start; }
  .pedido__caixa > .h2 { position: sticky; top: var(--md-s-6); }
}
.pedido__form { display: grid; gap: var(--md-s-6); min-width: 0; }
.pedido__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pedido__form legend { padding: 0; }

/* fields as wide as what goes in them; the shell's .md-field stops at 28rem */
.pedido__campo { max-width: 28rem; }
.pedido__campo--data input { width: 15rem; max-width: 100%; }
.pedido__campo--pessoas input { width: 8rem; }
.pedido__campo--largo { max-width: none; }
.pedido__campo select { width: 100%; }
.pedido__contacto { display: grid; gap: var(--md-s-6); padding-top: var(--md-s-6); border-top: 1px solid var(--md-rule); }
.md-hint a { color: inherit; }

/* the house selector: Massamá and Paço de Arcos side by side, «Tanto faz» under both */
.pedido__casas legend { font: 500 0.9375rem / 1.3 var(--md-font-text); margin-bottom: var(--md-s-3); }
.pedido__casas .md-house__note { overflow-wrap: anywhere; }
.pedido__tanto-faz .md-house__face { min-height: 56px; }
@media (min-width: 520.02px) { .pedido__tanto-faz { grid-column: 1 / -1; } }
/* the errors of the two radio groups: the shell's .md-field .md-error, outside a .md-field */
.pedido__casas > .md-error, .pedido__servico > .md-error {
  display: flex; gap: 6px; align-items: flex-start; margin: 0;
  color: var(--md-error); font: 500 var(--md-t-small) / 1.4 var(--md-font-text);
}
.pedido__casas > .md-error[hidden], .pedido__servico > .md-error[hidden] { display: none; }
.pedido__casas > .md-error .ico, .pedido__servico > .md-error .ico { width: 1.2em; height: 1.2em; flex: none; margin-top: 1px; }
.pedido__casas > .md-error { grid-column: 1 / -1; }

/* lunch or dinner: two small tabs, the house selector's language */
.pedido__servico legend { font: 500 0.9375rem / 1.3 var(--md-font-text); margin-bottom: 6px; }
.pedido__opcoes { display: flex; flex-wrap: wrap; gap: var(--md-s-3); }
.pedido__opcao { position: relative; display: block; }
.pedido__opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pedido__opcao span {
  display: grid; place-items: center; min-width: 7.5rem; min-height: 48px; padding: 0 var(--md-s-5);
  border: 2px solid var(--md-ink); border-radius: var(--md-r-button); background: var(--md-paper);
  box-shadow: var(--md-shadow-button); font-weight: 500;
  transition: transform var(--md-dur-press) var(--md-ease-out), box-shadow var(--md-dur-press) var(--md-ease-out), background-color var(--md-dur-hover) ease;
}
.pedido__opcao input:checked + span { background: var(--md-action); color: var(--md-on-action); }
.pedido__opcao input:active + span { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); }
.pedido__opcao input:focus-visible + span { outline: 2px solid var(--md-focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pedido__opcao input:not(:checked):hover + span { background: var(--md-surface); } }
.pedido__servico > .md-error { margin-top: var(--md-s-2); }

/* the error summary: on top of the form, links to each field */
.pedido__resumo {
  padding: var(--md-s-4) var(--md-s-5);
  border: 2px solid var(--md-error); background: var(--md-paper); color: var(--md-error);
  box-shadow: var(--md-shadow-button);
}
.pedido__resumo:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 4px; }
.pedido__resumo-titulo { font-weight: 600; }
.pedido__resumo-titulo + .pedido__resumo-titulo, .pedido__resumo ul + .pedido__resumo-titulo { margin-top: var(--md-s-3); }
.pedido__resumo ul { list-style: none; margin-top: var(--md-s-2); display: grid; }
.pedido__resumo a { color: inherit; display: inline-block; padding-block: 6px; }

/* the end: privacy, the demo note, the send error, the button, the phones */
.pedido__fim { display: grid; gap: var(--md-s-4); justify-items: start; padding-top: var(--md-s-6); border-top: 1px solid var(--md-rule); }
.pedido__privacidade { font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); max-width: 40rem; }
.pedido__privacidade a { color: var(--md-text); }
.pedido__demo { display: flex; gap: var(--md-s-2); align-items: flex-start; font-size: var(--md-t-small); line-height: var(--md-lh-small); max-width: 40rem; }
.pedido__demo .ico { width: 1.2em; height: 1.2em; margin-top: 0.15em; color: var(--md-action); }
.pedido__aviso { display: flex; gap: var(--md-s-2); align-items: flex-start; margin: 0; max-width: 40rem; color: var(--md-error); font-weight: 500; }
.pedido__aviso .ico { width: 1.2em; height: 1.2em; margin-top: 0.15em; }
.pedido__enviar { margin-top: var(--md-s-2); min-width: 12rem; }
.pedido__enviar .ico--roda { display: none; }
.pedido__enviar[aria-busy="true"] .ico--roda { display: block; }
.pedido__telefone { font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); max-width: 40rem; }
.pedido__tel { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--md-text); white-space: nowrap; }

/* the trap for robots: off screen, out of the tab order, hidden from assistive technology */
.pedido__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* «Pedido enviado» */
.pedido__enviado { display: grid; gap: var(--md-s-5); justify-items: start; }
.pedido__enviado:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 8px; }
.pedido__enviado .lead { max-width: 32em; }
.pedido__enviado .acoes { margin-top: var(--md-s-2); }
.pedido__selo { width: 64px; height: 64px; border-radius: var(--md-r-round); border: 2px solid var(--md-action); color: var(--md-action); display: grid; place-items: center; }
.pedido__selo .md-peels { width: 34px; }
.pedido__ligar { display: inline-flex; align-items: center; gap: var(--md-s-2); min-height: 48px; }
.pedido__ligar .ico { margin: 0; }
.ligacao.pedido__ligar .ico { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .pedido__enviado.is-novo { animation: pedido-entra var(--md-dur-ui) var(--md-ease-out) both; }
  .pedido__enviado.is-novo .pedido__selo { animation: pedido-selo 420ms var(--md-ease-out) both; }
}
@keyframes pedido-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes pedido-selo { from { transform: rotate(-24deg) scale(0.9); } }

@media (max-width: 30em) {
  .pedido__enviar { width: 100%; }
  .pedido__opcao { flex: 1 1 0; }
  .pedido__opcao span { min-width: 0; }
}