/* Kampanyalar (/kampanyalar/ and its AMP twin): a gallery of campaign cards. Loaded on that page only.
   No colour literal here: every value is a token from tokens.css. The page reuses .grid, .card, .btn--ghost, .prose and
   .stripe from components.css / base.css; this file adds the picture frame and the column steps and nothing else.
   No !important: build_kampanyalar.py inlines this file into the AMP twin's amp-custom, where it is forbidden. */

/* 1 column on phones, 2 from 640 px, 3 from 1024 px (the same steps the `sizes` hint in the page markup describes). */
.kampanya-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kampanya-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kampanya-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The card gives its padding to the text block so the photo runs edge to edge. The frame is 16:9 whatever file arrives
   (the generator crops to 16:9 as well): the row never reflows when an image loads. */
.kampanya-card { display: flex; flex-direction: column; padding: 0; }
.kampanya-card__media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-1); border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.kampanya-card__media img { width: 100%; height: 100%; object-fit: cover; }
.kampanya-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--s-6); }
.kampanya-card__body .btn { align-self: flex-start; margin-top: auto; }

/* Square artwork (image_aspect 1:1): the campaign cards carry their own headline in the picture, so the frame is square
   and nothing is cropped. */
.kampanya-grid--square .kampanya-card__media { aspect-ratio: 1 / 1; }

/* Home page band (index.html and its AMP twin): picture tiles only, 2 columns on phones, 3 from 640 px, 5 from 1024 px.
   Declared after the page grid above so these column counts win at every width. */
.kampanya-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 640px) { .kampanya-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kampanya-grid--home { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kampanya-tile {
  display: block; overflow: hidden;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
}
.kampanya-tile:hover { border-color: var(--mandarin); }
.kampanya-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.home-kampanya .link-arrow { margin-top: var(--s-8); }