/* =========================================================
   podcast-flags.css — sole owner of flag button + svg/img size
   Load AFTER shell / hp-mobile / subpage-shell
   ========================================================= */

/* Base = 1920 design: flag = TOC/utility card size */
html body .page-shell {
  --flag-w: var(--card-size, 100px);
  --flag-h: var(--card-size, 100px);
}

html body .page-shell .podcast-language-button {
  position: relative !important;
  width: var(--flag-w) !important;
  height: var(--flag-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  background: transparent !important;
  cursor: pointer !important;
  color: inherit !important;
}

html body .page-shell .podcast-language-flag,
html body .page-shell svg.podcast-language-flag,
html body .page-shell img.podcast-language-flag {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;       /* was cover — stretch into 1×1 */
  object-position: center !important;
  border-radius: calc(15px * var(--scale, 1)) !important;
  box-sizing: border-box !important;
  /* same weight/feel as TOC cards */
  border: 2px solid var(--grid-card-border, rgba(130, 170, 210, 0.85)) !important;
}

html body .page-shell .podcast-language-button:hover .podcast-language-flag,
html body .page-shell .podcast-language-button:focus-visible .podcast-language-flag {
  border-color: var(--actionbar-hover-border, #e1e0bd) !important;
}

html body .page-shell .podcast-language-button:focus-visible {
  outline: 2px solid var(--actionbar-hover-stroke, #e1e0bd) !important;
  outline-offset: 4px !important;
  border-radius: calc(12px * var(--scale, 1)) !important;
}

/* ========== Mobile ========== */
@media (max-width: 767px) {
  html body .page-shell {
    --flag-w: 56px;
    --flag-h: 56px;
  }

  html body .page-shell .podcast-language-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
    justify-items: center !important;
    width: 100% !important;
  }

  html body .page-shell .podcast-language-button {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  html body .page-shell .podcast-language-flag,
  html body .page-shell svg.podcast-language-flag,
  html body .page-shell img.podcast-language-flag {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
  }
}

/* ========== Tablet portrait ========== */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  html body .page-shell {
    --flag-w: var(--card-size, calc(100px * min(100vw / 810px, 100vh / 1080px)));
    --flag-h: var(--flag-w);
  }

  html body .page-shell .podcast-language-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
    justify-items: center !important;
    width: 100% !important;
  }

  html body .page-shell .podcast-language-button {
    width: var(--flag-w) !important;
    height: var(--flag-h) !important;
  }

  html body .page-shell .podcast-language-flag,
  html body .page-shell svg.podcast-language-flag,
  html body .page-shell img.podcast-language-flag {
    width: 100% !important;
    height: 100% !important;
    border-radius: calc(16px * var(--portrait-scale, 1)) !important;
  }
}

/* ========== Landscape = 1920 clone (all widths) ========== */
@media (min-width: 768px) and (orientation: landscape) {
  html body .page-shell {
    --flag-w: var(--card-size, calc(100px * var(--scale, 1)));
    --flag-h: var(--card-size, calc(100px * var(--scale, 1)));
  }

  html body .page-shell .podcast-language-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    column-gap: calc(48px * var(--scale, 1)) !important; /* TOC col */
    row-gap: calc(110px * var(--scale, 1)) !important;    /* TOC row */
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
  }

  html body .page-shell .podcast-language-tile {
    display: flex !important;
    justify-content: center !important;
    max-width: calc(120px * var(--scale, 1)) !important;
  }
}