/*
 * Responzivní úpravy. Návrh je dělaný pro desktop (12sloupcová mřížka);
 * na tabletu zužujeme sloupce, na mobilu všechno skládáme pod sebe.
 * Boční odsazení stránky nikdy neklesne pod 16 px.
 */

/* ---------- Tablet na šířku ---------- */
@media (max-width: 1100px) {
    .hero__visual { grid-column: 1 / span 7; }
    .hero__side { grid-column: 8 / span 5; }
    .founder__portrait { grid-column: 1 / span 5; }
    .founder__body { grid-column: 6 / span 7; padding: 32px; }
    .studio__body { grid-column: 1 / span 9; }
    .studio__visual { grid-column: 1 / span 6; }
    .studio__tabs { grid-column: 7 / span 6; }
    .contact__card { grid-column: 1 / span 12; min-height: 420px; }
    .form { grid-column: 1 / span 12; }
}

/* ---------- Tablet na výšku a menší ---------- */
@media (max-width: 900px) {
    .section { padding-top: 112px; }
    .section__head { margin-bottom: 40px; }
    .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 88px; }
    .hero__visual, .hero__side { grid-column: auto; min-height: 0; }
    .hero__visual { min-height: min(70vh, 560px); }
    .hero__side { grid-template-rows: auto auto; }
    .projects__grid { grid-template-columns: 1fr; }
    .card--wide, .card--half { grid-column: auto; aspect-ratio: 4 / 3; }
    .founder__card { grid-template-columns: 1fr; }
    .founder__portrait, .founder__body { grid-column: auto; }
    .founder__portrait { min-height: 0; aspect-ratio: 4 / 3; }
    .founder__body { padding: 28px 24px 24px; }
    .timeline { grid-template-columns: 1fr; gap: 20px; }
    .studio__statement, .studio__body, .studio__visual, .studio__tabs { grid-column: 1 / span 12; }
    .studio__spacer { height: 40px; }
    .studio__visual { aspect-ratio: 4 / 3; }
    .footer { padding: 36px 24px 24px; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overlay__panel { height: 96vh; border-radius: 24px 24px 0 0; }
    .overlay__hero { aspect-ratio: 4 / 3; margin: 8px 12px 0; }
    .overlay__body { padding: 24px 12px 32px; }
    .overlay__tagline, .overlay__meta, .overlay__box--challenge, .overlay__box--solution, .overlay__img2, .overlay__img3 { grid-column: 1 / span 12; }
}

/* Bez myši není hover: dlouhé názvy karet jedou po dotykových zařízeních pořád, jinak by zůstaly oříznuté */
@media (hover: none) {
    .card__name.is-overflow { animation-play-state: running; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
    .site { padding: 0 16px 16px; }
    .nav { padding: 14px 16px; }
    .nav__center { display: none; } /* tři sekce jsou dosažitelné scrollem a CTA; menu by na mobilu nemělo kam */
    .btn-solid { padding: 10px 14px; font-size: 13px; }
    .hero__visual { border-radius: var(--radius-lg); }
    .hero__badge, .hero__title-wrap { left: 20px; right: 20px; }
    .hero__title-wrap { bottom: 20px; }
    .hero__card { padding: 22px; }
    .hero__cta { padding: 18px 20px; }
    .card__type { top: 16px; left: 16px; }
    .card__tagline, .card__name-wrap { padding: 0 16px; }
    .card__name { font-size: clamp(36px, 11vw, 64px); }
    .contact__content { left: 20px; right: 20px; bottom: 20px; }
    .form { padding: 22px; }
    .form__row { grid-template-columns: 1fr; }
    .form__actions { flex-direction: column; align-items: stretch; }
    .form__submit { width: 100%; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .shot__browser { --bar-h: 22px; left: 2%; width: 78%; border-radius: 10px; }
    .shot__bar { gap: 5px; padding: 0 9px; }
    .shot__bar i { width: 6px; height: 6px; }
    .shot__url { font-size: 9px; height: 15px; padding: 0 8px; }
    .shot__phone { right: 4%; top: 28%; height: 92%; border-width: 4px; border-radius: 26px; }
    /* Vějíř telefonů na střed a těsněji — široká karta je na mobilu jen 343 px */
    .card--wide .shot--app { --fan-x: 50%; }
    .shot--app .shot__phone { height: 84%; top: 30%; }
    .shot--app .shot__phone--l { left: calc(var(--fan-x) - 36%); }
    .shot--app .shot__phone--r { left: calc(var(--fan-x) + 6%); }
    .shot--app .shot__phone--c { height: 100%; top: 16%; }
    .shot--browser .shot__browser { left: 6%; width: 88%; }
    /* Níž než na desktopu, aby lišta prohlížeče a popisek artboardu nekolidovaly s typem projektu v rohu karty */
    .shot--solo .shot__browser { left: 6%; width: 88%; top: 21%; }
    /* Artboardy návrhu na úzké kartě: přední větší, zadní těsněji u okraje */
    .shot--design .shot__board--front { left: 36%; top: 25%; width: 62%; }
    .shot--design .shot__board--back { left: 3%; top: 37%; width: 48%; }
    .shot__screen { border-radius: 8px; }
    .shot__label { font-size: 9px; margin-bottom: 6px; }
    .overlay__bar { padding: 12px; }
    .overlay__hero-text { left: 16px; right: 16px; bottom: 16px; }
    .overlay__box { padding: 20px; }
    .overlay__next { padding: 18px 20px; }
}

/* ---------- Služby, kostra karet — doplňky ke stejným breakpointům jako výše ---------- */
@media (max-width: 1100px) {
    .services__packages, .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Úvod a tarify péče pod sebe — osm sloupců je na tabletu příliš úzkých */
    .care { grid-template-columns: 1fr; }
    .care__intro, .care__list { grid-column: auto; }
}
@media (max-width: 900px) {
    .services__title h2, .services__title p { grid-column: 1 / span 12; }
    .care, .prep { grid-column: 1 / span 12; }
    .skel-card--wide { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
    .services__packages, .process__steps { grid-template-columns: 1fr; }
    .pkg, .care, .process, .prep { padding: 22px; }
    .tier { grid-template-columns: 1fr; gap: 6px; }
}