/*
 * The advertising consent question and the privacy page's choice
 * (product owner, 2026-10-19).
 *
 * Built from the site's own components, not a new one: the title is the
 * `.eyebrow` label, the text is a `.note`, and Accept and Decline are the
 * hero's outlined `.store` pill in its `.get` row ("Baixar o app"), the same
 * control twice so neither is the easier to press. The banner is a panel the
 * way the page draws one (the availability panel and the closing card): the
 * surface, a one-pixel `--border` hairline, the `--card` corner, no shadow.
 *
 * What is new is only what a fixed question needs: where it sits, the
 * panel's values on it, a `<button>` reset so `.store` draws as it does on a
 * link, `[hidden]` winning over `.get`'s flex, and room below the footer
 * while it is open (`consent-asking`, set by ads-consent.mjs), so it never
 * hides the last links.
 *
 * Kept small on purpose (ENG-437): one sentence and a link to the privacy
 * page, which says the rest, a slimmer pill than the hero's (still the same
 * for both), and on a wide window the buttons beside the text.
 *
 * Its own file rather than a part of `styles.css`: that one is a reviewed
 * trust root of the Linux release (`linux-release.mjs`).
 */

.consent {
  position: fixed;
  inset-inline: var(--s2);
  bottom: var(--s2);
  z-index: 4;
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card);
}

.consent[hidden],
.consent-choices[hidden] {
  display: none;
}

.consent .eyebrow {
  margin: 0 0 0.35rem;
}

.consent .note {
  margin: 0;
}

.consent .consent-choices {
  margin-top: var(--s1);
}

/* Size and weight stay `.get .store`'s; only what a browser gives a button
 * of its own is undone. */
.consent-choices button.store {
  font-family: inherit;
  line-height: inherit;
  background: none;
  cursor: pointer;
}

/* In the banner the pill is a little slimmer than the hero's, so the
 * question, not its buttons, is most of the panel. */
.consent button.store {
  padding: 0.4rem 1.1rem;
}

/* `.store:hover` again: the reset above outranks it. */
.consent-choices button.store:hover {
  background: var(--heading);
}

.consent-asking body {
  padding-bottom: 13rem;
}

/* Wide enough for the question and both buttons on one row: the buttons
 * beside the text instead of under it, as most sites' cookie bars do. */
@media (min-width: 48rem) {
  .consent {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--s3);
    align-items: center;
    padding: var(--s2) var(--s3);
  }

  .consent .consent-choices {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-wrap: nowrap;
    margin: 0;
  }

  .consent-asking body {
    padding-bottom: 8rem;
  }
}