/* ==========================================================================
   pages.css — komponenty podstránek: /portfolio/, case studies, zásady
   Figma: Portfolio 116:1508 / 220:667, Biogama 133:187 / 221:2,
          Finvestor 157:2 / 221:137, Biodeur.lab 168:96 / 221:214,
          Zásady 214:2 / 214:87
   Závisí na tokens.css, base.css, components.css a sections.css.

   Plynulé hodnoty: clamp(mobil, …, desktop) mezi šířkou 390 a 1496 px.
   Vzorec: mobil + (desktop − mobil) × (100vw − 390px) / 1106
   ========================================================================== */


/* --------------------------------------------------------------------------
   Společné
   -------------------------------------------------------------------------- */

/* Nadpis + text + tlačítko na střed (Portfolio, Další projekty) */
.section-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.section-intro h2 {
  max-width: 954px;
}

.section-intro p {
  max-width: 512px;
}

.section-intro--narrow p {
  max-width: 1018px;
}

/* Tlačítko VÍCE: na mobilu menší (Figma 220:908 — výška 32, kolečko 24) */
@media (max-width: 767px) {
  /* Klikací plocha je celý řádek projektu (.project-row__link níže),
     takže je výrazně větší než 44 px; vzhled tlačítka zůstává 32 px. */
  .btn--responsive {
    height: 32px;
    padding: 4px 4px 4px 16px;
  }

  .btn--responsive .btn__icon {
    width: 24px;
    height: 24px;
  }
}

/* Malé červené kolečko s ikonou (karty Další projekty) */
.icon-circle--xs {
  width: 25px;
  height: 25px;
}


/* ==========================================================================
   /portfolio/ — tři projekty (Figma 116:2041 / mobil 220:883)
   ========================================================================== */
.projects-list {
  padding-top: clamp(48px, calc(48px + 24 * (100vw - 390px) / 1106), 72px);
  padding-bottom: clamp(24px, calc(24px + 48 * (100vw - 390px) / 1106), 72px);
}

.projects-list__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, calc(32px + 19 * (100vw - 390px) / 1106), 51px);
}

/* Mobil: obrázek nahoře, text pod ním */
.project-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Celý řádek (obrázek, název, text) vede na case study přes JEDINÝ odkaz —
   tlačítko VÍCE. Jeho ::after se roztáhne přes celý řádek („stretched link“):
   jedna zastávka tabulátoru i pro čtečky, kurzor ukazatel všude,
   najetí kamkoli na řádek spustí hover tlačítka (posun šipky). */
.project-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-card);
}

.project-row__media {
  padding: 16px;
}

.project-row__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.project-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-row__text .badge {
  margin-bottom: 24px;
}

.project-row__text .t-body-m {
  max-width: 528px;
  margin-top: 16px;
}

.project-row__text .btn {
  margin-top: clamp(32px, calc(32px + 28 * (100vw - 390px) / 1106), 60px);
}

/* Štítek oboru (Branding / Web design / Packaging) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 16px 0 12px;
  border-radius: 40px;
  background-color: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
}

/* Tablet a desktop: text vlevo, obrázek vpravo */
@media (min-width: 768px) {
  .project-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text media";
    align-items: center;
    column-gap: clamp(32px, calc(32px + 40 * (100vw - 768px) / 728), 72px);
  }

  .project-row__text  { grid-area: text; }
  .project-row__media { grid-area: media; }

  .project-row__media {
    justify-self: center;
    width: 100%;
    max-width: 416px;
    padding: 0;
  }
}


@media (min-width: 1200px) {
  .project-row {
    min-height: 481px; /* Figma: výška řádku projektu */
  }
}


/* ==========================================================================
   /portfolio/ — Další projekty (Figma 176:9 + 116:2342 / mobil 220:967 + 220:971)
   Karty nejsou odkazy; hover je stejný jako u ostatních karet (.card-lift).
   ========================================================================== */
.other-projects {
  padding-top: clamp(53px, calc(53px + 9 * (100vw - 390px) / 1106), 62px);
  padding-bottom: clamp(48px, calc(48px + 74 * (100vw - 390px) / 1106), 122px);
}

.other-projects .container {
  display: flex;
  flex-direction: column;
  gap: clamp(70px, calc(70px + 72 * (100vw - 390px) / 1106), 142px);
}

.other-projects__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.other-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--white); /* neviditelný, ztmavne při najetí (.card-lift) */
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: 0 4px 10px rgba(24, 24, 24, 0.08);
}

.other-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(200px, calc(200px + 18 * (100vw - 390px) / 1106), 218px);
  overflow: hidden;
  background-color: #F3EDE2; /* pozadí karty Woldo (Figma) */
}

.other-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.other-card__media .other-card__logo {
  width: 227px;
  height: 56px;
  object-fit: contain;
}

.other-card__body {
  display: flex;
  flex-direction: column;
  padding: 28px 16px;
}

.other-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 5px 7px;
  border-radius: 50px;
  background-color: var(--color-surface-soft);
  color: var(--color-text);
}

.other-card__body .t-body-m {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .other-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .other-card__body {
    padding: 28px;
  }
}

@media (min-width: 1200px) {
  .other-projects__grid {
    grid-template-columns: repeat(3, minmax(0, 349px));
    justify-content: center;
  }
}


/* ==========================================================================
   CASE STUDIES — sekce (Figma: Logo před/po, Varianty loga, Brandové vizuály…)
   ========================================================================== */
.case-section {
  padding-block: clamp(40px, calc(40px + 32 * (100vw - 390px) / 1106), 72px);
}

.case-section--intro {
  padding-top: clamp(40px, calc(40px + 50 * (100vw - 390px) / 1106), 90px);
  padding-bottom: clamp(40px, calc(40px + 15 * (100vw - 390px) / 1106), 55px);
}

/* Nadpis (Heading/H4) + text */
.case-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Text nahoře, obrázky pod ním */
.case-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, calc(32px + 28 * (100vw - 390px) / 1106), 60px);
}

/* Úvodní sekce: text vlevo, obrázky vpravo (mobil pod sebou) */
.case-split {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case-split__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-split__media img {
  max-width: 100%;
}

.case-split__media--single img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

@media (min-width: 1200px) {
  .case-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .case-split .case-text {
    flex: 0 0 482px;
    padding-top: 10px;
  }

  .case-split--wide-text .case-text {
    flex-basis: 558px;
  }

  .case-split--wide-text .case-text p {
    max-width: 518px;
  }

  .case-split__media {
    flex: 0 0 582px;
    align-items: flex-end;
  }

  .case-split__media--single {
    flex-basis: 506px;
  }

  .case-split__media--single img {
    width: 498px;
  }
}

/* Dlaždice (barevné pozadí s logem / produktem) */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.tile-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.tile--logo-before {
  width: 100%;
  aspect-ratio: 514 / 232;
}

.tile--logo-before img {
  width: 100%;
  height: auto;
}

.tile--biogama-purple { background-color: #62365A; } /* barvy značky Biogama */
.tile--biogama-green  { background-color: #C6E7B3; }
.tile-pair .tile--biogama-purple,
.tile--biogama-green { height: 218px; } /* Figma: pevná výška 218 px i na mobilu */
.tile--biogama-purple img { width: 78%; max-width: 192px; }
.tile--biogama-green img  { width: 58%; max-width: 143px; }

.tile--symbol {
  aspect-ratio: 311 / 280;
}

.tile--symbol img {
  width: 62%;
  max-width: 192px;
}

.tile--biodeur-grey {
  width: 100%;
  aspect-ratio: 514 / 232;
  background-color: #828385; /* barva značky Biodeur.lab */
}

.tile--biodeur-grey img {
  width: 60%;
  max-width: 306px;
}

/* Produkty před/po: na mobilu ve velikosti jako na desktopu, na střed */
.tile--product {
  width: 100%;
  max-width: 247px;
  margin-inline: auto;
  aspect-ratio: 247 / 232;
}

.tile--product img {
  width: auto;
  height: 97%;
  object-fit: contain;
}

@media (min-width: 1200px) {
  .tile--logo-before,
  .tile--biodeur-grey {
    width: 514px;
  }

  .tile-pair {
    grid-template-columns: repeat(2, 247px);
  }

  .tile--product {
    margin-inline: 0;
  }
}

/* Řada obrázků — výška se dorovná přes poměry stran (ořezy odpovídají Figmě) */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.gallery img,
.masonry img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .gallery--bg-symbol { grid-template-columns: 387fr 311fr 398fr; }
  .gallery--bg-fair   { grid-template-columns: 349fr 391fr 349fr; max-width: 1121px; margin-inline: auto; }
  .gallery--bd        { grid-template-columns: 369fr 350fr 369fr; max-width: 1120px; margin-inline: auto; }
  .gallery--fv        { grid-template-columns: repeat(2, minmax(0, 419px)); justify-content: center; }
}

/* Masonry galerie (Biogama): tři sloupce, v každém dva obrázky */
.masonry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.masonry__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}


/* ==========================================================================
   CASE STUDIES — Další projekt (Figma 260:30 / mobil 260:65)
   Celý blok je odkaz; šipka se při najetí posune (.arrow-nudge).
   ========================================================================== */
.next-project {
  padding-top: clamp(32px, calc(32px + 16 * (100vw - 390px) / 1106), 48px);
  padding-bottom: clamp(40px, calc(40px + 24 * (100vw - 390px) / 1106), 64px);
}

.next-project__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 12px;
  color: var(--color-text);
}

.next-project__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.next-project__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(44px, calc(44px + 12 * (100vw - 390px) / 1106), 56px);
  height: clamp(44px, calc(44px + 12 * (100vw - 390px) / 1106), 56px);
  border-radius: 50%;
  background-color: var(--color-dark);
  transition: background-color var(--duration) var(--ease);
}

.next-project__link:hover .next-project__arrow {
  background-color: var(--color-dark-hover);
}


/* ==========================================================================
   ZÁSADY OCHRANY OSOBNÍCH ÚDAJŮ (Figma 214:17 / mobil 214:95)
   Textový sloupec 680 px.
   ========================================================================== */
.legal {
  padding: clamp(40px, calc(40px + 56 * (100vw - 390px) / 1106), 96px) var(--section-gutter)
           clamp(56px, calc(56px + 64 * (100vw - 390px) / 1106), 120px);
}

.legal__column {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 680px;
  margin-inline: auto;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Datum: ve Figmě grey-200, to ale na bílé nesplní WCAG AA → grey-300 */
.legal__date {
  color: var(--color-text-muted);
}

.legal__intro,
.legal__section p {
  color: var(--color-text-muted);
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal__section h2 {
  color: var(--color-text);
}

/* Odkazy v textu musí být rozlišitelné i bez barvy → podtržení */
.legal a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal a:hover {
  color: var(--color-primary);
}