/* ================================================================
   Keytos redesign — global footer (.kfoot-* namespace)
   Dark surface (applies .theme-dark token scope).
   Figma Design-System footer: desktop 2180:2589 / tablet 2180:2588 / mobile 2180:2587
   Breakpoints: desktop >= 1100 | tablet 500-1099 | mobile < 500
   ================================================================ */

.kfoot-root *,
.kfoot-root *::before,
.kfoot-root *::after { box-sizing: border-box; }
.kfoot-root p { margin: 0; }
.kfoot-root ul { list-style: none; margin: 0; padding: 0; }

.kfoot-root {
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-64) var(--section-pad-x) 120px;
  font-family: var(--font-family-secondary);
}
.kfoot-row { width: 100%; max-width: var(--content-max); }

/* ---- Top: brand + nav columns --------------------------------- */
.kfoot-top { display: flex; gap: var(--space-96); align-items: flex-start; }
.kfoot-brand { display: flex; flex-direction: column; gap: var(--space-16); flex-shrink: 0; }
/* align-self for the same reason as .kfoot-link: the flex column would
   otherwise stretch the anchor past the logo, making the empty space beside it
   navigate home on mobile. The image is width: auto and left-aligned either
   way, so nothing moves. */
.kfoot-logo { line-height: 0; display: block; align-self: flex-start; }
.kfoot-logo img { height: 80px; width: auto; display: block; }
.kfoot-badges { display: flex; gap: var(--space-16); align-items: center; }
/* cover (not contain) so both badges fill the box at equal visual size despite
   differing source aspect ratios/padding (matches Figma) */
.kfoot-badge { height: 100px; width: 100px; object-fit: cover; object-position: center; }

.kfoot-nav { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: var(--space-32); }
.kfoot-col { display: flex; flex-direction: column; gap: var(--space-12); }
.kfoot-col-title {
  font-size: var(--font-size-b4); line-height: var(--line-height-l1);
  font-weight: 600; color: var(--color-text-secondary);
}
.kfoot-links { display: flex; flex-direction: column; gap: var(--space-8); }
.kfoot-link {
  /* align-self keeps the hit box on the label instead of letting the flex
     column stretch it across the whole column, which on mobile made the whole
     row tappable. Position, stacking and spacing are unchanged: the left edge
     is still the column edge, and a label too long for the column still wraps
     the same way. */
  display: block; align-self: flex-start; padding: var(--space-2) 0;
  font-size: var(--font-size-b3); line-height: var(--line-height-b3);
  color: var(--color-text-primary); text-decoration: none;
  transition: color 0.15s ease;
}
.kfoot-link:hover { color: var(--color-text-brand); }

/* ---- Podcast preview card ------------------------------------- */
/* Outer is a size container so the card responds to its OWN width
   (individual responsiveness), independent of the viewport. */
.kfoot-podcast { container-type: inline-size; }
.kfoot-podcast-card {
  display: flex; align-items: center; gap: var(--space-32);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 20px;
  padding: var(--space-16);
}
.kfoot-podcast-thumb {
  position: relative; flex-shrink: 0;
  width: 402px; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #10233b 0%, #0b3a5c 55%, #0091ce 100%);
}
.kfoot-podcast-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The podcast card holds a real embed; the slot already clips to its radius. */
.kfoot-podcast-thumb iframe { display: block; width: 100%; height: 100%; border: 0; }
.kfoot-podcast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); justify-content: center; }
.kfoot-podcast-meta { display: flex; flex-direction: column; gap: var(--space-4); }
.kfoot-podcast-date { font-size: var(--font-size-b4); line-height: var(--line-height-l1); font-weight: 600; color: var(--color-text-secondary); }
.kfoot-podcast-title {
  font-family: var(--font-family-primary); font-weight: 700;
  font-size: var(--font-size-h4); line-height: var(--line-height-h4);
  color: var(--color-text-primary);
}
.kfoot-desc-wrap { position: relative; }
.kfoot-podcast-desc {
  font-size: var(--font-size-b2); line-height: var(--line-height-b2);
  color: var(--color-text-secondary); max-width: 800px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kfoot-desc-wrap.is-expanded .kfoot-podcast-desc { display: block; overflow: visible; }
.kfoot-read-more {
  position: absolute; bottom: 0; right: 0;
  padding-left: 3em;
  background: linear-gradient(to right, transparent, var(--color-surface-card) 40%);
  border: none; cursor: pointer;
  font-family: var(--font-family-secondary); font-size: var(--font-size-b2); line-height: var(--line-height-b2);
  color: var(--color-text-secondary); text-decoration: underline;
  transition: color 0.15s ease;
}
/* Same hover as .kfoot-link, so every interactive thing in the footer responds
   the same way. */
.kfoot-read-more:hover { color: var(--color-text-brand); }
.kfoot-desc-wrap.is-expanded .kfoot-read-more { position: static; background: none; padding-left: 0; }
.kfoot-yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  align-self: flex-start;
  padding: var(--space-16) var(--space-32);
  border: 1px solid var(--color-btn-secondary-border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-b2); line-height: var(--line-height-b2); font-weight: 500;
  color: var(--color-text-primary); text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kfoot-yt-btn:hover { color: var(--color-text-brand); border-color: var(--color-text-brand); }
.kfoot-yt-btn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Card responds to its OWN width (not viewport): go vertical once narrow enough
   that the horizontal layout would exceed ~330px tall. Placed AFTER the base
   rules so these win (same specificity). Thumbnail then fills width, aspect locked. */
@container (max-width: 830px) {
  .kfoot-podcast-card { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .kfoot-podcast-thumb { width: 100%; }
  .kfoot-yt-btn { align-self: stretch; }
}

/* ---- Social + language row ------------------------------------ */
.kfoot-social-row { display: flex; align-items: center; justify-content: space-between; }
.kfoot-social { display: flex; align-items: center; gap: var(--space-16); }
.kfoot-social a { line-height: 0; display: block; }
.kfoot-social img { height: 32px; width: 32px; object-fit: contain; display: block; }
.kfoot-lang {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-16); border: none; background: none; cursor: pointer;
  border-radius: var(--radius-pill); color: var(--color-text-primary);
  transition: color 0.15s ease;
}
.kfoot-lang:hover { color: var(--color-text-brand); }
.kfoot-lang-inner { display: inline-flex; align-items: center; gap: var(--space-8); }
.kfoot-lang-label { font-size: var(--font-size-b4); line-height: var(--line-height-b4); font-weight: 500; }
.kfoot-lang svg.kfoot-globe { width: 16px; height: 16px; }
.kfoot-lang svg.kfoot-chev { width: 16px; height: 16px; transition: transform 0.2s ease; }
.kfoot-lang[aria-expanded="true"] svg.kfoot-chev { transform: rotate(180deg); }

/* Language dropdown — opens upward (footer is at page bottom) */
.kfoot-lang-wrap { position: relative; }
.kfoot-lang-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 160px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
  padding: var(--space-4);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}
.kfoot-lang-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.kfoot-lang-menu a {
  display: block; padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm);
  font-size: var(--font-size-b3); color: var(--color-text-primary); text-decoration: none;
}
.kfoot-lang-menu a:hover { background: var(--color-info-background); color: var(--color-text-primary); }

/* ---- Legal ---------------------------------------------------- */
.kfoot-legal {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--font-size-b4); line-height: var(--line-height-b4);
  color: var(--color-text-primary);
}
.kfoot-legal-line { display: flex; gap: var(--space-8); }
.kfoot-legal-links { display: flex; gap: var(--space-20); }
.kfoot-legal-links a { color: var(--color-text-primary); text-decoration: none; }
.kfoot-legal-links a:hover { color: var(--color-text-brand); }

/* ================================================================
   Tablet (768-1072)
   ================================================================ */
@media (max-width: 1072px) {
  .kfoot-root { gap: var(--space-48); padding: var(--space-48) var(--space-32) 120px; }
  /* stretch so the nav grid fills the container (podcast layout is container-driven) */
  .kfoot-top { align-items: stretch; }
}

@media (min-width: 768px) and (max-width: 1072px) {
  /* brand: logo left, badges right */
  .kfoot-top { flex-direction: column; gap: var(--space-48); }
  .kfoot-brand { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
  .kfoot-logo img { height: 80px; }
  .kfoot-badge { height: 80px; width: 80px; }

  /* nav: 2x2 grid */
  .kfoot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ================================================================
   Mobile (< 768) — single column, larger link text
   ================================================================ */
@media (max-width: 767px) {
  .kfoot-root { gap: var(--space-20); padding: 40px var(--space-20) 120px; align-items: stretch; }

  .kfoot-top { flex-direction: column; gap: var(--space-20); }
  .kfoot-brand { flex-direction: column; gap: var(--space-24); }
  .kfoot-logo img { height: 60px; }
  .kfoot-badge { height: 60px; width: 60px; }

  /* nav columns stack full width */
  .kfoot-nav { display: flex; flex-direction: column; gap: var(--space-20); }
  .kfoot-col-title { font-size: var(--font-size-b2); line-height: var(--line-height-b2); font-weight: 500; }
  .kfoot-link { font-size: var(--font-size-b1); line-height: var(--line-height-b1); }

  /* social + language stack */
  .kfoot-social-row { flex-direction: column; align-items: flex-start; gap: var(--space-20); }
  .kfoot-social img { height: 44px; width: 44px; }
  .kfoot-lang { padding: var(--space-16) var(--space-32); }
  .kfoot-lang-label { font-size: var(--font-size-b2); line-height: var(--line-height-b2); }
  .kfoot-lang svg.kfoot-globe { width: 24px; height: 24px; }
  .kfoot-lang svg.kfoot-chev { width: 20px; height: 20px; }

  /* legal: links first, then stacked info, all at B2 */
  .kfoot-legal { flex-direction: column; align-items: flex-start; gap: var(--space-20); font-size: var(--font-size-b2); line-height: var(--line-height-b2); }
  .kfoot-legal-links { order: -1; }
  .kfoot-legal-line { flex-direction: column; gap: 0; }
  .kfoot-legal-sep { display: none; }
}