/* ================================================
   BENTO BOX PHOTOGRAPHY PORTFOLIO
   Černá & stříbrná — Senior refactor
   ================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Primární paleta */
  --black:           #000000;
  --dark:            #0a0a0a;
  --dark-soft:       #111111;
  --gray-dark:       #1a1a1a;
  --gray-medium:     #2a2a2a;
  --gray-light:      #3a3a3a;

  /* Stříbrný akcent */
  --silver:          #e0e0e0;
  --silver-dark:     #b0b0b0;
  --silver-light:    #f0f0f0;

  /* Text */
  --text-primary:    #ffffff;
  --text-secondary:  #f0f0f0;
  --text-muted:      #d0d0d0;
  --text-soft:       #a0a0a0;

  /* Aliasy */
  --border-dark:     var(--gray-medium);
  --block-bg:        var(--dark-soft);
  --block-bg-alt:    var(--dark);
  --alabaster-grey:  var(--dark-soft);
  --cream:           var(--dark-soft);
  --white:           var(--text-primary);

  /* Layout */
  --max-width:       1400px;
  --section-pad-x:   2rem;        /* desktop horizontal padding */
  --services-pad: 0.5rem;
  --section-pad-mob: 1.25rem;     /* mobile  horizontal padding */
  --card-radius:     24px;
  --gap-lg:          2rem;
  --gap-md:          1.5rem;
  --gap-sm:          1rem;
}

h1, h2, h3, h4 {
  font-family: 'Times New Roman', Times, serif;
}

body, p, a, button, input, textarea {
  font-family: 'Calibri', 'Trebuchet MS', sans-serif;
}

/* ===== RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: var(--black);
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

/* ===== TYPOGRAPHY ===== */
h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.7;
}

a {
  color: var(--silver);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--silver-light); }

/* ===== GLOBAL SECTION WRAPPER ===== */
/* Každá sekce dostane stejné, konzistentní boční odsazení */
.hero-bento .bento-container,
.portfolio-section > *,
.contact-section .contact-grid,
.testimonials-grid {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* ===== SECTION HEADERS ===== */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  padding: 0 var(--section-pad-x);
}

.section-header h2,
.section-header .wp-block-heading {
  text-align: center;
  width: 100%;
  color: var(--silver) !important;
  margin-bottom: 1.5rem;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== BENTO BOX BASE ===== */
.bento-box {
  background: var(--alabaster-grey);
  border-radius: var(--card-radius);
  padding: 2.5rem;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  border: 1px solid var(--border-dark);
}
.bento-box:hover { transform: translateY(-2px); }

/* ===================================================
   HERO — Jak pracuji / Jak probíhá focení
   =================================================== */
.hero-bento {
  padding: 2rem 0;
  background: var(--black);
}

.hero-bento .bento-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding-top: 0;
  padding-bottom: 0;
}

.bento-row {
  display: flex;
  gap: var(--gap-lg);
  /* Výška řádku — pevná pro desktop */
  min-height: 400px;
}

.bento-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Textový box vlevo */
.box-description {
  background: var(--dark);
  border-radius: var(--card-radius);
  padding: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border-dark);
}

.box-description h2 {
  color: var(--silver) !important;
  margin-bottom: 1.5rem;
  text-align: center;
}

.box-description p {
  font-size: 1.125rem !important;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 80%;
  margin: 0 auto !important;
  text-align: center;
}

/* Textový box vpravo s malými fotkami */
.box-process {
  background: var(--dark);
  border-radius: var(--card-radius);
  padding: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border-dark);
}

.box-process h2 {
  font-size: 1.5rem;
  font-weight: 450;
  margin-bottom: 1rem;
  color: var(--silver);
  text-align: center;
  width: 100%;
}

.box-process p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: center;
  max-width: 90%;
  margin: 0 auto 1.5rem auto;
}

/* Fotky */
.box-photo-large,
.box-photo-couple {
  height: 100%;
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  position: relative;
}

/* Každá vrstva uvnitř — zaoblení + overflow */
.box-photo-large *,
.box-photo-couple * {
  border-radius: var(--card-radius);
}

.box-photo-large .wp-block-group,
.box-photo-couple .wp-block-group,
.box-photo-large .bento-image,
.box-photo-couple .bento-image,
.box-photo-large figure,
.box-photo-couple figure {
  border-radius: var(--card-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.bento-image,
.small-bento-image {
  width: 100%;
  height: 100%;
  display: block;
}

.bento-image img,
.small-bento-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--card-radius);
  transition: transform 0.6s ease;
}

/* Přímý img uvnitř box-photo (Gutenberg někdy generuje mimo .bento-image) */
.box-photo-large img,
.box-photo-couple img {
  border-radius: var(--card-radius) !important;
  overflow: hidden;
}

/* ===== MALÉ FOTKY v box-process ===== */
.small-photos-row {
  display: flex;
  gap: var(--gap-md);
  margin-top: 2.5rem;
  width: 100%;
}

.small-photo-column {
  flex: 1;
  /* Aspect-ratio zajistí, že fotky nebudou roztažené */
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.box-photo-small-1,
.box-photo-small-2 {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s ease;
  background: var(--black);
}

.box-photo-small-1:hover,
.box-photo-small-2:hover { transform: scale(1.03); }

.box-photo-small-1 img,
.box-photo-small-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* ===================================================
   SERVICES SECTION — Service cards
   Robustní řešení: nekonfliktuje s Gutenberg CSS
   =================================================== */
.portfolio-section {
  padding: 4rem 0;
  background: var(--black);
}

/* Wrapper řádků — centrování + padding */
.services-row {
  display: flex;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  padding: 0 var(--section-pad-x);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  /* Gutenberg flex reset */
  flex-wrap: nowrap;
  align-items: stretch;
}

.services-row:last-of-type { margin-bottom: 0; }

.service-column {
  flex: 1 1 0;
  min-width: 0;
}

/* -----------------------------------------------
   Karta — flex column, vše uvnitř jde pod sebe
----------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-dark);
  height: 100%;
  /* zabraňuje Gutenberg padding resetu */
  padding: 0 !important;
  margin: 0 !important;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.service-cover {
  position: relative;
  width: 100%;
  /* aspect-ratio jako primární metoda */
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  overflow: hidden;
  /* zaoblení jen nahoře */
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: var(--gray-dark);
}

/* Gutenberg vkládá .wp-block-cover jako přímé dítě */
.service-cover .wp-block-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Obrázek na pozadí */
.service-cover .wp-block-cover__image-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* Preferujeme horní část — tváře, hlavy */
  object-position: center 15% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transition: transform 0.6s ease;
}

.service-card:hover .wp-block-cover__image-background {
  transform: scale(1.05);
}

/* Overlay */
.service-cover .wp-block-cover__background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.15) 60%,
    rgba(0, 0, 0, 0.0) 100%
  ) !important;
  opacity: 1 !important;
  z-index: 1;
}

/* Inner container — nadpis přes fotku, dole vlevo */
.service-cover .wp-block-cover__inner-container {
  position: absolute !important;
  bottom: 1rem !important;
  left: 1.25rem !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 2.5rem) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
  background: none !important;
  /* Gutenberg defaultně centruje — přepíšeme */
  display: block !important;
  text-align: left !important;
}

/* Nadpis na fotce */
.service-cover .service-title,
.service-cover .wp-block-heading {
  font-size: clamp(1.1rem, 2vw, 1.6rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  text-align: left !important;
  background: none !important;
  display: block !important;
}

/* -----------------------------------------------
   Spodní část karty — popis + tlačítko
----------------------------------------------- */
.service-content {
  padding: 1.5rem !important;
  background: var(--dark-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0 !important;
  width: 100% !important;
  border-top: 1px solid var(--border-dark);
  box-sizing: border-box !important;
}

.service-content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.service-content .wp-block-buttons {
  margin: 0;
  padding: 0;
}

.service-button { margin: 0 !important; }

.service-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--silver) !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 30px !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  border: 1.5px solid var(--silver-dark) !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
  display: inline-block;
  text-decoration: none !important;
  line-height: 1;
}

.service-button.is-style-outline .wp-block-button__link:hover {
  background: var(--silver) !important;
  color: var(--black) !important;
  border-color: var(--silver) !important;
  transform: translateY(-1px);
}

/* ===================================================
   GALLERY — Vybraná práce
   =================================================== */
.section-gallery {
  margin-top: 2rem;
  padding: 4rem var(--section-pad-x);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.section-gallery.section-dark {
  background: var(--dark);
  border-radius: var(--card-radius);
}

/* 2 fotky vedle sebe — desktop i tablet */
.gallery-grid-custom {
  gap: 1.5rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: start;
}

.gallery-grid-custom .wp-block-image,
.gallery-grid-custom figure {
  margin: 0 !important;
  width: 100% !important;
}

.gallery-grid-custom .wp-block-image img,
.gallery-grid-custom figure img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

.gallery-button-container {
  margin-top: 3rem !important;
  padding-top: 1rem !important;
}

/* ===================================================
   CONTACT SECTION
   Šířka = max-width, aby odpovídala galerii
   =================================================== */
.contact-section {
  padding: 4rem 0;
  background: var(--black);
}

/* Wrapper zarovná obsah na stejnou šířku jako galerie */
.contact-grid {
  display: flex;
  justify-content: center;
  padding: 0 var(--section-pad-x);
}

.contact-column {
  width: 100%;
}

/* Karta kontaktu — max-width stejná jako galerie */
.contact-box {
  background: var(--dark-soft);
  border-radius: var(--card-radius);
  padding: 4rem;
  width: 100%;
  max-width: var(--max-width);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-dark);
  margin: 0 auto;
}

.contact-heading {
  text-align: center;
  width: 100%;
  margin-bottom: 1.5rem;
  color: var(--silver) !important;
  font-size: 2.5rem;
}

.contact-details {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.contact-item {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.contact-item strong {
  color: var(--silver);
  font-size: 1rem;
  font-weight: 600;
}

.contact-item a,
.contact-item span {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.8;
}

.contact-item a:hover { color: var(--silver); }

.contact-item div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.contact-item div p {
  margin: 0.25rem 0;
  line-height: 1.8;
}

.social-links {
  display: flex;
  gap: 3rem;
  margin-top: 2rem;
  padding-top: 2.5rem;
  border-top: 2px solid var(--silver);
  justify-content: center;
  width: 100%;
}

.social-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.social-link:hover {
  color: var(--silver);
}

/* ===== OPRAVY GUTENBERG COVERŮ ===== */
.wp-block-cover {
  padding: 0 !important;
  margin: 0 !important;
}

.wp-block-cover.alignfull {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===================================================
   TESTIMONIALS
   =================================================== */
.testimonials-section {
  padding: 8rem 0;
  background: var(--dark);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}

.testimonial-box {
  background: var(--dark-soft);
  border-radius: var(--card-radius);
  padding: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  border: 1px solid var(--border-dark);
}
.testimonial-box:hover { transform: translateY(-2px); }

.testimonial-stars {
  color: var(--silver);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.testimonial-box p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-dark);
}

.testimonial-author strong { color: var(--silver); }
.testimonial-author span  { font-size: 0.875rem; color: var(--text-soft); }

/* ===================================================
   PORTFOLIO GRID (starší varianta, pro jistotu)
   =================================================== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.portfolio-box {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  position: relative;
}

.portfolio-tall { grid-row: span 3; }

.portfolio-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  transition: transform 0.4s ease;
}
.portfolio-box:hover img { transform: scale(1.03); }

.portfolio-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 20px 20px;
}
.portfolio-box:hover .portfolio-info { transform: translateY(0); }

.portfolio-info h4 { color: var(--silver); margin-bottom: 0.5rem; }
.portfolio-info p  { font-size: 0.95rem; margin: 0; color: var(--text-secondary); }

/* ===================================================
   MISC. UTILITY
   =================================================== */
.box-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--gray-medium);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--silver);
}

/* ===================================================
   RESPONSIVE — TABLET  (≤ 1024px)
   =================================================== */
@media (max-width: 1024px) {
  :root {
    --section-pad-x: 1.5rem;
    --gap-lg: 1.5rem;
  }

  .bento-row { min-height: 340px; }

  /* Foto boxy — dostatečná výška na tabletu (jsou stále vedle sebe) */
  .box-photo-large,
  .box-photo-couple {
    min-height: 300px;
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
  }

  /* Karty POD SEBOU na tabletu */
  .services-row {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .service-column {
    width: 100% !important;
    flex: none !important;
  }

  /* Landscape fotka na tabletu — kratší výška */
  .service-cover {
    aspect-ratio: 4 / 3 !important;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================================
   RESPONSIVE — MOBIL  (≤ 768px)
   =================================================== */
@media (max-width: 768px) {
  :root {
    --section-pad-x: var(--section-pad-mob);  /* 1.25rem */
    --gap-lg: 1rem;
    --gap-md: 0.875rem;
  }

  /* ---- Obecné sekce ---- */
  .section-header {
    padding: 0 var(--section-pad-mob) !important;
    margin-bottom: 2.5rem;
  }

  /* ---- HERO řádky — vše pod sebou ---- */
  .bento-row {
    flex-direction: column !important;
    gap: 1rem !important;
    min-height: auto;
  }

  .bento-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .box-description,
  .box-process {
    padding: 2rem 1.5rem !important;
  }

  .box-description p { max-width: 100% !important; }

  .box-photo-large,
  .box-photo-couple {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    background: var(--dark);
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
  }

.box-photo-large img,
.box-photo-couple img {
  border-radius: var(--card-radius) !important;
}

  .box-photo-large .bento-image,
  .box-photo-couple .bento-image,
  .box-photo-large .wp-block-image,
  .box-photo-couple .wp-block-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .box-photo-large .bento-image img,
  .box-photo-couple .bento-image img,
  .box-photo-large img,
  .box-photo-couple img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--card-radius) !important;
  }

  .small-photos-row {
    flex-direction: row !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
    /* Zrušíme pevnou výšku — aspect-ratio to řídí */
    height: auto !important;
  }

  .small-photo-column {
    flex: 1;
    /* 4:3 poměr — přirozená velikost, neroztahuje se */
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .box-photo-small-1,
  .box-photo-small-2 {
    width: 100% !important;
    height: 100% !important;
  }

  /* ---- SERVICE KARTY: 1 sloupec na mobilu — pod sebou ---- */
  .services-row {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    padding: 0 var(--services-pad);
  }

  .service-column {
    width: 100% !important;
    flex: none !important;
    flex-basis: 100% !important;
  }

  /* Fotka: kratší aspect-ratio na mobilu — víc krajiny, méně výšky */
  .service-cover {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .service-cover .wp-block-cover__inner-container {
    bottom: 0.75rem !important;
    left: 1rem !important;
  }

  .service-cover .service-title,
  .service-cover .wp-block-heading {
    font-size: 1.25rem !important;
  }

  .service-content {
    padding: 1.25rem !important;
    gap: 0.75rem !important;
  }

  .service-content p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  .service-button.is-style-outline .wp-block-button__link {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.85rem !important;
  }

  /* ---- GALLERY ---- */
  .section-gallery {
    padding: 2rem var(--section-pad-mob);
  }

  /* Na mobilu 1 sloupec */
  .gallery-grid-custom {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  .gallery-button-container {
    margin-top: 2rem !important;
    padding-top: 0.5rem !important;
  }

  /* ---- TESTIMONIALS ---- */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding-left: var(--section-pad-mob) !important;
    padding-right: var(--section-pad-mob) !important;
  }

  .testimonial-box {
    padding: 1.75rem !important;
  }

  /* ---- CONTACT ---- */
  .contact-grid {
    padding-left: var(--section-pad-mob) !important;
    padding-right: var(--section-pad-mob) !important;
  }

  .contact-box {
    padding: 2.5rem 1.5rem !important;
  }

  .contact-heading { font-size: 1.75rem; }

  .contact-details {
    gap: 1rem;
    margin: 1.5rem 0 2rem;
  }

  .social-links { gap: 1.5rem; }

  /* ---- PORTFOLIO grid ---- */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .portfolio-box,
  .portfolio-tall {
    height: 280px !important;
    width: 100% !important;
  }
}

/* ===================================================
   RESPONSIVE — MALÝ MOBIL  (≤ 480px)
   =================================================== */
@media (max-width: 480px) {
  :root {
    --section-pad-x: 0.875rem;
    --section-pad-mob: 0.875rem;
  }

  .box-description,
  .box-process {
    padding: 1.5rem 1rem !important;
  }

  .box-description h2 { font-size: 1.75rem; }
  .box-description p  { font-size: 1rem !important; }

  .box-photo-large,
  .box-photo-couple {
    /* Dědí aspect-ratio 4/3 z 768px breakpointu — žádná pevná výška */
    aspect-ratio: 4 / 3;
  }

  /* Service karty na malém mobilu — pořád full-width, jen menší padding */
  .service-content {
    padding: 1rem !important;
  }

  .contact-box { padding: 2rem 1rem !important; }
  .contact-heading { font-size: 1.5rem; }
  .contact-details { gap: 1rem; }

  .contact-item strong { font-size: 0.9rem; }
  .contact-item a,
  .contact-item span  { font-size: 0.95rem; }

  .social-links { gap: 1.25rem; }

  .portfolio-box,
  .portfolio-tall { height: 240px !important; }
}

/* ===================================================
   RESPONSIVE — EXTRA MALÝ MOBIL  (≤ 375px)
   =================================================== */
@media (max-width: 375px) {
  :root {
    --section-pad-x: 0.625rem;
    --section-pad-mob: 0.625rem;
  }

  .box-photo-large,
  .box-photo-couple {
    /* Na nejmenším mobilu mírně menší poměr — šetří místo, ale stále vidíme celou fotku */
    aspect-ratio: 4 / 3;
  }

  .portfolio-box,
  .portfolio-tall { height: 200px !important; }

  .contact-box { padding: 1.25rem 0.625rem !important; }
}