/* =========================================================
   Viktória Mikušková — portfolio
   Palette & type reproduced from the original design
   ========================================================= */
:root{
  --cream:#FBEFE3;
  --terra:#C6673D;
  --olive:#676340;
  --btn:#666240;
  --sage:#ACB783;
  --peach:#F1CBAC;
  --dark:#011126;
  --ink:#1a1613;
  --muted:#4a453f;
  --content:1712px;
  --gutter:clamp(22px, 5.2vw, 100px);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- fluid type ----------------------------------------------------
     Sizes are anchored to the original design at a 1920px viewport and
     scale down gently on narrower screens, so live text stays in
     proportion with the hero artwork (which scales with the viewport). */
  --fs-nav:   clamp(14px,   0.52vw + 8.0px,  18px);   /* 1440→15.5 1920→18 */
  --fs-body:  clamp(14px,   0.31vw + 11.5px, 17px);   /* 1440→16.0 1920→17.4 */
  --fs-small: clamp(12px,   0.21vw + 9.5px,  13.5px);
  --fs-label: clamp(16px,   0.52vw + 10.5px, 21px);   /* section eyebrows */
  --fs-name:  clamp(32px,   2.30vw + 8.0px,  52px);   /* Mgr. Viktória …  */
  --fs-h2:    clamp(24px,   1.15vw + 10.0px, 32px);
  --fs-card:  clamp(18px,   0.42vw + 13.5px, 21px);

  /* ---- fluid vertical rhythm ---- */
  --sp-sect:  clamp(46px,   3.9vw + 4px,  86px);
  --sp-gap:   clamp(26px,   1.8vw + 6px,  42px);
  --measure:  68ch;                                   /* max text line length */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.container{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ======================= HEADER / NAV ======================= */
.site-header{
  background:var(--cream);
  padding:28px 0 26px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{height:clamp(60px, 4.2vw, 80px);width:auto;}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(24px, 2.9vw, 52px);
}
.main-nav a{
  font-size:var(--fs-nav);
  font-weight:400;
  letter-spacing:.13em;
  color:#0b0b0f;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:color .2s ease;
}
.main-nav a:hover{color:var(--terra);}
.main-nav .has-caret svg{margin-top:2px;}

/* ---- dropdown ---- */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;}
.nav-dropdown > .has-caret{cursor:pointer;}
.has-caret svg{transition:transform .24s ease;}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  margin-top:16px;
  min-width:236px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 22px 50px rgba(60,42,26,.20);
  padding:14px 0;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:80;
}
.dropdown-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;}
.dropdown-menu a{
  font-size:var(--fs-body);
  font-weight:400;
  letter-spacing:.01em;
  color:var(--dark);
  padding:11px 32px;
  display:block;
  transition:color .18s ease, background .18s ease;
}
.dropdown-menu a:hover{color:var(--terra);background:rgba(198,103,61,.08);}
.dropdown-menu a.active{color:var(--terra);font-weight:500;}
/* Hover sám nestačí: na dotykových zariadeniach neexistuje a kliknutie
   na odkaz stránku rovno otvorilo, takže sa zoznam sekcií nedal zobraziť.
   Trieda is-open ho otvára kliknutím, hover ostáva pre myš. */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dropdown:hover > .has-caret,
.nav-dropdown:focus-within > .has-caret,
.nav-dropdown.is-open > .has-caret{color:var(--terra);}
.nav-dropdown:hover > .has-caret svg,
.nav-dropdown:focus-within > .has-caret svg,
.nav-dropdown.is-open > .has-caret svg{transform:rotate(180deg);}

/* ---- hamburger ---- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:var(--dark);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ======================= HERO ======================= */
.hero{
  position:relative;
  line-height:0;
}
.hero-pic{display:block;}
.hero-img{
  width:100%;
  height:auto;
}
/* The headline is painted into the wide artwork, so on desktop this copy is
   hidden visually but left in the document for screen readers and SEO. */
.hero-copy{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.hero-btn{
  position:absolute;
  left:10.2%;
  top:67.5%;
  background:var(--btn);
  color:#fff;
  font-size:clamp(11px, 1.05vw, 20px);
  letter-spacing:.16em;
  font-weight:400;
  line-height:1;
  padding:clamp(10px,1vw,18px) clamp(16px,1.8vw,32px);
  border-radius:34px;
  transition:transform .2s ease, background .2s ease;
}
.hero-btn:hover{background:#54502f;transform:translateY(-2px);}

/* ======================= SLUŽBY ======================= */
.services{padding:var(--sp-sect) 0;}
.services-row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(20px, 1.9vw, 30px);
}
.service{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
}
.service:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-13px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:66px;
  background:rgba(120,105,90,.34);
}
.service-icon{
  width:clamp(72px, 5.4vw, 96px);
  height:clamp(72px, 5.4vw, 96px);
  flex:0 0 auto;
}
.service-text{display:flex;flex-direction:column;gap:3px;}
.service-title{
  font-size:clamp(15px, 0.42vw + 10px, 18px);
  font-weight:600;
  letter-spacing:.03em;
  color:#20201c;
}
.service-sub{
  font-size:var(--fs-small);
  font-weight:400;
  color:var(--muted);
  letter-spacing:.01em;
}


/* ---- pás disciplín: mriežka odkazov, nie zoznam služieb ---- */
.services-grid{
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);
  margin-top:var(--sp-gap);
}
.services-grid .service{align-items:stretch;}
.services-grid .service::after{display:none;}
.services-grid .service > a{
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  padding:16px 20px;
  border:1px solid rgba(120,105,90,.22);
  border-radius:14px;
  background:var(--cream);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.services-grid .service > a:hover,
.services-grid .service > a:focus-visible{
  border-color:var(--terra);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(90,66,42,.10);
}
.services-grid .service-icon{width:clamp(54px,3.8vw,68px);height:clamp(54px,3.8vw,68px);}
.services-grid .service-sub{max-width:30ch;line-height:1.5;}
/* Tri karty vedľa seba potrebujú aspoň ~950 px. Nižšie dve, na telefóne jedna. */
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){
  .services-grid{grid-template-columns:1fr;}
  .services-grid .service-sub{max-width:none;}
}

/* ---- počet prác v hlavičke kategórie ---- */
.cat-hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.cat-count{
  flex:0 0 auto;
  font-size:var(--fs-small);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

/* ======================= PROJEKTY NA DOMOVSKEJ ======================= */
.projects{padding:var(--sp-sect) 0 var(--sp-gap);}
/* Druhý blok má jemne inú plochu, aby sa dve zamerania nezliali do jedného. */
.projects-alt{
  background:rgba(172,183,131,.11);
  padding-bottom:var(--sp-sect);
}
.section-lead{
  max-width:56ch;
  margin:14px 0 0;
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--muted);
}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}
.projects-title{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  color:var(--olive);
}
.projects-link{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.05em;
  color:var(--terra);
  white-space:nowrap;
  transition:opacity .2s ease;
}
.projects-link:hover{opacity:.72;}

/* ======================= O MNE ======================= */
.about{padding:var(--sp-sect) 0;}
.about-grid{
  display:grid;
  grid-template-columns:0.94fr 1fr;
  gap:clamp(30px, 4.4vw, 84px);
  align-items:start;
}
.about-photo{align-self:start;}
.about-photo img{
  width:100%;
  max-width:700px;
  margin:0 auto;
}
.about-text{max-width:var(--measure);}

.eyebrow{
  margin:0 0 10px;
  font-size:var(--fs-label);
  font-weight:400;
  letter-spacing:.12em;
}
.eyebrow-olive{color:var(--olive);}
.eyebrow-dark{
  color:var(--dark);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.08em;
  display:inline-block;
}
.eyebrow-rule{
  display:block;
  width:56px;
  height:3px;
  background:var(--terra);
  margin-top:9px;
}
.about-name{
  margin:8px 0 26px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-name);
  line-height:1.08;
  color:var(--dark);
  letter-spacing:.002em;
}
.about-name em{
  font-style:italic;
  color:var(--terra);
  font-weight:500;
}
.lead{
  margin:0 0 16px;
  font-size:var(--fs-body);
  font-weight:700;
  color:#000;
  line-height:1.6;
}
.para{
  margin:0 0 20px;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  color:#000;
}
.para-en{color:var(--terra);}
.para-en em{font-style:italic;}

.soft-rule{
  border:0;
  border-top:1px solid rgba(120,105,90,.32);
  margin:var(--sp-gap) 0 calc(var(--sp-gap) * 0.75);
}
.tools{
  width:100%;
  max-width:690px;
  height:auto;
  margin-top:6px;
}

/* ======================= MOJA KREATÍVNA CESTA ======================= */
.journey{margin-top:6px;}
.role{
  margin:0 0 7px;
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--terra);
}
.role:not(:first-child){margin-top:26px;}
.role-sub{font-weight:400;font-style:italic;}
.journey ul{
  list-style:none;
  margin:0;
  padding:0;
}
.journey li{
  font-size:var(--fs-body);
  line-height:1.68;
  color:#000;
  padding-left:15px;
  position:relative;
}
.journey li::before{
  content:"-";
  position:absolute;
  left:0;
}

/* ======================= FOOTER ======================= */
.site-footer{padding:0 0 clamp(46px, 3.6vw, 72px);}
.footer-rule{
  border:0;
  border-top:1px solid rgba(198,103,61,.45);
  margin:var(--sp-gap) 0 calc(var(--sp-gap) * 1.1);
}
.footer-inner{
  display:flex;
  align-items:center;
  gap:clamp(28px, 2.8vw, 46px);
}
.footer-logo img{height:clamp(92px, 7vw, 122px);width:auto;}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-left:6px;
}
.footer-contact a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:clamp(16px, 0.52vw + 8px, 21px);
  color:#111;
  transition:color .2s ease;
}
.footer-contact a:hover{color:var(--terra);}
.footer-contact .ci{color:var(--terra);flex:0 0 auto;}

.footer-social{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
}
.soc{
  width:44px;
  height:44px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:transform .2s ease, filter .2s ease;
}
.soc:hover{transform:translateY(-3px);filter:brightness(1.05);}
.soc-ig{background:#b8336a;}
.soc-in{background:#1275b1;}
.soc-tt{background:#050505;}

/* ======================= HOME: PORTFOLIO CATEGORY TILES ======================= */
.category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
  margin-top:38px;
}
.category-tile{
  background:#fff;
  border-radius:18px;
  padding:34px 24px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 10px 30px rgba(90,66,42,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.category-tile:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(90,66,42,.16);}
.category-tile img{width:clamp(62px, 4.6vw, 80px);height:clamp(62px, 4.6vw, 80px);margin-bottom:16px;}
.category-tile h3{
  margin:0 0 9px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
}
.category-tile p{
  margin:0 0 18px;
  font-size:var(--fs-small);
  line-height:1.62;
  color:var(--muted);
  flex:1;
}
.category-tile .tile-link{
  font-size:calc(var(--fs-small) * 0.95);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terra);
}

/* ======================= PORTFOLIO SUBPAGE ======================= */
.cat-hero{padding:calc(var(--sp-sect) * 0.7) 0 8px;}
.breadcrumb{
  font-size:var(--fs-small);
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 0 var(--sp-gap);
}
.breadcrumb a{color:var(--muted);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--terra);}
.breadcrumb .sep{margin:0 9px;opacity:.6;}
.breadcrumb .current{color:var(--terra);}
.cat-hero-inner{
  display:flex;
  align-items:center;
  gap:clamp(24px, 2.4vw, 40px);
}
.cat-hero-icon{
  width:clamp(84px, 6.6vw, 116px);
  height:clamp(84px, 6.6vw, 116px);
  flex:0 0 auto;
}
.cat-eyebrow{
  margin:0 0 8px;
  font-size:var(--fs-small);
  letter-spacing:.22em;
  color:var(--olive);
  text-transform:uppercase;
}
.cat-title{
  margin:0 0 16px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-name);
  line-height:1.06;
  color:var(--dark);
}
.cat-desc{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.72;
  color:#000;
  max-width:60ch;
}

.cat-projects{padding:var(--sp-sect) 0 var(--sp-gap);}
.cat-projects-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(120,105,90,.28);
  padding-top:var(--sp-gap);
  margin-bottom:6px;
}
.cat-projects-head .eyebrow{margin:0;}
.cat-count{font-size:var(--fs-small);letter-spacing:.05em;color:var(--muted);}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px, 2.4vw, 38px) clamp(22px, 2vw, 32px);
  margin-top:var(--sp-gap);
}
.project-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(90,66,42,.09);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(90,66,42,.17);}
.project-thumb{
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumb-sage-a{background:linear-gradient(140deg,#bccb9c 0%,#a3b27c 100%);}
.thumb-sage-b{background:linear-gradient(140deg,#ced7b2 0%,#adb888 100%);}
.thumb-peach-a{background:linear-gradient(140deg,#f4cfb1 0%,#e9b78f 100%);}
.thumb-peach-b{background:linear-gradient(140deg,#f0d9c6 0%,#e5bd9d 100%);}
.thumb-glyph{width:clamp(46px,3.6vw,60px);height:clamp(46px,3.6vw,60px);color:#fff;opacity:.62;}
.thumb-num{
  position:absolute;
  right:16px;
  bottom:6px;
  font-family:var(--serif);
  font-size:clamp(52px,4.4vw,70px);
  font-weight:600;
  color:#fff;
  opacity:.24;
  line-height:1;
  pointer-events:none;
}
.project-tag{
  position:absolute;
  top:15px;
  left:15px;
  background:rgba(255,255,255,.86);
  color:var(--dark);
  font-size:calc(var(--fs-small) * 0.86);
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:5px 13px;
  border-radius:20px;
  backdrop-filter:blur(2px);
}
.project-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.project-body h3{
  margin:0 0 7px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
}
.project-body .ptype{
  margin:0 0 12px;
  font-size:calc(var(--fs-small) * 0.9);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--olive);
}
.project-body p{
  margin:0 0 18px;
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--muted);
  flex:1;
}
.project-link{
  font-size:var(--fs-small);
  letter-spacing:.05em;
  font-weight:600;
  color:var(--terra);
  align-self:flex-start;
}

/* ---- CTA band ---- */
.cat-cta{padding:var(--sp-gap) 0 var(--sp-sect);}
.cat-cta-inner{
  background:var(--btn);
  border-radius:22px;
  padding:clamp(38px,3.4vw,58px) clamp(28px,4.6vw,66px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.cat-cta-inner h2{
  margin:0 0 9px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-h2);
  color:#fff;
}
.cat-cta-inner p{margin:0;font-size:var(--fs-body);color:rgba(255,255,255,.82);}
.cta-btn{
  background:var(--cream);
  color:var(--btn);
  font-size:var(--fs-small);
  letter-spacing:.09em;
  font-weight:600;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:32px;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease;
}
.cta-btn:hover{transform:translateY(-2px);background:#fff;}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1100px){
  :root{--content:100%;}
  .about-grid{grid-template-columns:1fr;gap:36px;}
  .about-photo img{max-width:480px;}
  .about-text{max-width:none;}
  .category-grid{grid-template-columns:repeat(3,1fr);}
  .project-grid{grid-template-columns:repeat(2,1fr);}
}
/* ---- portrait hero: stacked copy + illustration ---- */
@media (max-width:860px){
  .hero{
    display:flex;
    flex-direction:column;
    line-height:normal;
    padding-top:10px;
  }
  .hero-copy{
    order:1;
    position:static;
    width:auto;height:auto;
    margin:0;padding:0 var(--gutter);
    overflow:visible;
    clip-path:none;
    white-space:normal;
  }
  .hero-title{
    margin:0 0 clamp(16px,4vw,26px);
    font-family:var(--serif);
    font-weight:400;
    line-height:1.05;
    color:#111;
  }
  .hero-title .hl1{display:block;font-size:clamp(31px,9.6vw,66px);}
  .hero-title .hl2{display:block;font-size:clamp(25px,7.7vw,53px);margin-top:.1em;}
  .hero-title em{
    position:relative;
    font-style:italic;
    color:var(--terra);
  }
  /* brushstroke lifted from the original artwork, scales with the type */
  .hero-title em::after{
    content:"";
    position:absolute;
    left:5%;right:-7%;
    bottom:-.30em;
    height:.19em;
    background:url("assets/images/hero-brush.png") no-repeat center/100% 100%;
  }
  .hero-sub{
    margin:0;
    font-size:var(--fs-body);
    line-height:1.58;
    color:#1c1c1c;
    max-width:33ch;
  }
  .hero-btn{
    order:2;
    position:static;
    left:auto;top:auto;
    align-self:flex-start;
    margin:clamp(20px,4.6vw,30px) var(--gutter) 0;
  }
  .hero-pic{
    order:3;
    margin-top:clamp(6px,2vw,16px);
  }
  .hero-img{width:100%;}
}

@media (max-width:760px){
  .site-header{padding:16px 0;position:relative;}
  .logo img{height:60px;}
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--cream);
    padding:6px 0 18px;
    box-shadow:0 22px 42px rgba(60,42,26,.16);
    display:none;
    z-index:90;
  }
  .main-nav.open{display:flex;}
  .main-nav > a,
  .nav-dropdown > .has-caret{
    font-size:16px;
    letter-spacing:.12em;
    padding:14px var(--gutter);
  }
  .nav-dropdown{position:static;display:block;}
  .nav-dropdown > .has-caret{justify-content:space-between;}
  .dropdown-menu{
    position:static;
    transform:none;
    margin:0;
    min-width:0;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:0 0 8px;
  }
  .dropdown-menu a{padding:10px var(--gutter) 10px calc(var(--gutter) + 24px);}
  .footer-inner{flex-wrap:wrap;gap:24px;justify-content:center;text-align:center;}
  .footer-social{margin:0 auto;}
  .hero-btn{font-size:13px;padding:13px 24px;}
  .category-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .cat-hero-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .cat-cta-inner{flex-direction:column;align-items:flex-start;text-align:left;}
}
@media (max-width:480px){
  .hero-btn{font-size:11px;padding:9px 14px;border-radius:22px;}
  .category-grid{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
}

/* =========================================================
   PORTFÓLIO — karty projektov, mriežky, case study
   Náhľady rešpektujú orientáciu: knižné obálky sú na výšku.
   ========================================================= */

/* ---- mriežka ---- */
.p-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,2.6vw,42px) clamp(22px,2.2vw,34px);
  margin-top:var(--sp-gap);
}
.p-grid-featured{grid-template-columns:repeat(3,1fr);}

/* ---- karta ---- */
.p-card{
  display:flex;
  flex-direction:column;
  transition:transform .25s ease;
}
.p-card:hover{transform:translateY(-5px);}
.p-card:hover .p-thumb{box-shadow:0 22px 48px rgba(90,66,42,.20);}
.p-card:hover .p-link{color:#a4512c;}

/* ---- náhľad: pomer strán podľa orientácie ---- */
.p-thumb{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#efe4d8;
  box-shadow:0 10px 28px rgba(90,66,42,.12);
  transition:box-shadow .25s ease;
}
.p-thumb.is-portrait{aspect-ratio:2/3;}
.p-thumb.is-landscape{aspect-ratio:4/3;}
.p-thumb.is-square{aspect-ratio:1/1;}
.p-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* zástupná plocha, kým nepríde obrázok */
.p-thumb.is-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(135deg,#ece1d5,#ece1d5 12px,#e6dacd 12px,#e6dacd 24px);
  box-shadow:inset 0 0 0 1px rgba(120,105,90,.18);
}
.p-thumb.is-empty span{
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(90,80,66,.55);
}

/* ---- telo karty ---- */
.p-body{padding:16px 2px 0;display:flex;flex-direction:column;align-items:flex-start;}
.p-body h3{
  margin:0 0 5px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
  line-height:1.2;
}
.p-sub{
  margin:0 0 10px;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--muted);
}
.p-link{
  font-size:var(--fs-small);
  letter-spacing:.04em;
  font-weight:600;
  color:var(--terra);
  transition:color .2s ease;
}

/* ---- štítok stavu práce ---- */
.p-status{
  display:inline-block;
  margin-bottom:9px;
  font-size:calc(var(--fs-small) * .84);
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
}
.st-school{background:rgba(172,183,131,.30);color:#5b6535;}
.st-commercial{background:rgba(198,103,61,.16);color:#a4512c;}
.st-published{background:rgba(198,103,61,.90);color:#fff;}
.st-concept{background:rgba(120,105,90,.16);color:#5f564a;}
.st-award{background:#4a5878;color:#fff;}

/* =========================== CASE STUDY =========================== */
.case-study{padding-bottom:10px;}
.cs-top{padding:calc(var(--sp-sect) * .6) 0 0;}
.cs-head{max-width:var(--measure);}
.cs-title{
  margin:6px 0 10px;
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-name);
  line-height:1.06;
  color:var(--dark);
}
.cs-sub{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--muted);
}

/* Hlavný vizuál. Nie je to orezaná dlaždica, ale celý obrázok s obmedzenou
   výškou, aby banner neodsunul text projektu pod okraj okna. */
.cs-hero{padding:var(--sp-gap) 0 0;}
.cs-hero-img{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(90,66,42,.12);
  transition:box-shadow .25s ease;
}
.cs-hero-img img{
  display:block;
  max-height:min(44vh,380px);
  max-width:100%;
  width:auto;height:auto;
}
.cs-hero-img:hover{box-shadow:0 18px 40px rgba(90,66,42,.20);}
.cs-hero .p-thumb{margin:0 auto;}
.cs-hero .p-thumb.is-portrait{max-width:min(380px,58vw);}
.cs-hero .p-thumb.is-square{max-width:min(440px,64vw);}
.cs-hero .p-thumb.is-landscape{max-width:min(620px,100%);}

/* ---- fakty o projekte ---- */
.cs-meta{padding:var(--sp-gap) 0 0;}
.cs-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px 26px;
  margin:0;
  padding-top:var(--sp-gap);
  border-top:1px solid rgba(120,105,90,.28);
}
.m-item dt{
  font-size:calc(var(--fs-small) * .9);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:5px;
}
.m-item dd{
  margin:0;
  font-size:var(--fs-small);
  line-height:1.5;
  color:#1c1c1c;
}
.m-item.is-todo dd{color:rgba(90,80,66,.45);font-style:italic;}

/* ---- zadanie / riešenie / prečo ---- */
.cs-prose{padding:var(--sp-sect) 0 0;}
.cs-block{max-width:var(--measure);margin-bottom:var(--sp-gap);}
.cs-block h2{
  margin:0 0 10px;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--olive);
}
.cs-block p{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.72;
  color:#000;
}
.cs-block .todo{color:rgba(90,80,66,.45);font-style:italic;}

/* ---- video ----
   Reel je na výšku 9:16. Bez obmedzenia výšky by vytlačil celý text projektu
   pod okraj okna, presne ako predtým banner. */
.cs-video{padding:var(--sp-gap) 0 0;}
.v-item{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;}

/* Príspevok a reel vedľa seba. Obe médiá držia rovnakú výšku, nie rovnakú
   šírku — 4:5 a 9:16 sa inak nedajú postaviť vedľa seba tak, aby to nevyzeralo
   ako chyba. Na úzkom displeji sa poskladajú pod seba. */
.cs-duo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(18px,2.6vw,40px);
}
.d-item{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;}
.cs-duo .cs-hero-img img,
.cs-duo .v-player{max-height:min(52vh,440px);}
.cs-duo figcaption{
  margin-top:10px;
  font-size:calc(var(--fs-small) * .92);
  letter-spacing:.05em;
  color:var(--muted);
  text-align:center;
  max-width:34ch;
}
.v-player{
  display:block;
  max-height:min(58vh,540px);
  max-width:100%;
  width:auto;
  border-radius:10px;
  background:#1c1610;
  box-shadow:0 14px 34px rgba(90,66,42,.16);
}
.v-item figcaption{
  margin-top:10px;
  font-size:calc(var(--fs-small) * .92);
  letter-spacing:.05em;
  color:var(--muted);
  text-align:center;
}

/* ---- galéria ----
   Obrázky sa nesmú orezávať: mockupy a logotypy majú rôzne pomery strán a
   výplňou sa im odrezávali okraje aj s názvom. Rám má preto pevný pomer,
   aby boli všetky dlaždice rovnaké, a obrázok v ňom sedí celý. */
.cs-gallery{padding:var(--sp-sect) 0 0;}
.g-hint{
  margin:0 0 14px;
  font-size:calc(var(--fs-small) * .92);
  letter-spacing:.05em;
  color:var(--muted);
}
/* Rovnaká VÝŠKA, nie rovnaká šírka. Obrázky majú rôzne pomery strán, takže
   v rovnako širokých rámoch končili každý inak vysoký. Takto sedia na jednej
   linke a šírka sa prispôsobí každému, bez orezania. */
.g-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(20px,2.2vw,34px);
  --gh:clamp(180px,19vw,270px);
}
.g-grid.frame-portrait{--gh:clamp(220px,24vw,330px);}
/* Šesť a viac záberov: nižší rad, nech sa ich zmestí viac vedľa seba. */
.g-grid.is-many{--gh:clamp(120px,13vw,180px);}
.g-grid.is-many.frame-portrait{--gh:clamp(170px,18vw,240px);}
.g-grid.is-1{--gh:clamp(240px,30vw,400px);}
.g-grid.is-2{--gh:clamp(220px,24vw,340px);}
.g-item{margin:0;display:flex;flex-direction:column;max-width:100%;}
.g-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--gh);
  max-width:100%;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(90,66,42,.12);
  transition:box-shadow .25s ease, transform .25s ease;
  cursor:zoom-in;
}
.g-frame img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;}
/* Zástupná plocha nemá vlastný pomer strán, tak jej ho dáme. */
.g-frame.is-empty{aspect-ratio:4/3;}
.g-frame:hover{box-shadow:0 20px 44px rgba(90,66,42,.20);transform:translateY(-3px);}
.g-frame.is-empty{
  background:repeating-linear-gradient(135deg,#ece1d5,#ece1d5 12px,#e6dacd 12px,#e6dacd 24px);
  box-shadow:inset 0 0 0 1px rgba(120,105,90,.18);
  cursor:default;
}
.g-frame.is-empty span{
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(90,80,66,.55);
}
.g-item figcaption{
  margin-top:9px;
  font-size:calc(var(--fs-small) * .92);
  letter-spacing:.05em;
  color:var(--muted);
}
/* Popisok nesmie byť širší než obrázok, pod ktorým stojí. */
.g-item figcaption{max-width:100%;}

/* ---- predchádzajúci / ďalší projekt ---- */
.cs-nav{padding:var(--sp-sect) 0 0;}
.cs-nav-inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid rgba(120,105,90,.28);
  padding-top:var(--sp-gap);
}
.cs-prev,.cs-next{display:flex;flex-direction:column;gap:4px;max-width:46%;}
.cs-next{text-align:right;align-items:flex-end;}
.cs-nav span{
  font-size:calc(var(--fs-small) * .9);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--olive);
}
.cs-nav strong{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  color:var(--dark);
  transition:color .2s ease;
}
.cs-prev:hover strong,.cs-next:hover strong{color:var(--terra);}

/* ---- aktívna položka v menu ---- */
.main-nav a.active{color:var(--terra);}

/* ---- responzívne ---- */
@media (max-width:1100px){
  .p-grid,.p-grid-featured{grid-template-columns:repeat(2,1fr);}
  .p-grid-more{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .p-grid-more{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .p-grid,.p-grid-featured{grid-template-columns:1fr;gap:30px;}
  .p-grid-more{grid-template-columns:repeat(2,1fr);gap:22px;}
  /* Nadpis sekcie a odkaz sa na úzkom displeji nepomestia vedľa seba. */
  .section-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .cs-hero .p-thumb.is-portrait{max-width:78vw;}
  .cs-nav-inner{flex-direction:column;gap:22px;}
  .cs-prev,.cs-next{max-width:100%;text-align:left;align-items:flex-start;}
}

/* Vybrané projekty na homepage: jednotný pomer strán, aby riadok čítal ako celok.
   Skutočné proporcie práce sa ukážu na stránke projektu. */
/* Jej hero zábery sú 4:3 mockupy — pomer 4/5 im odrezával okraje aj s názvom.
   Dlaždice teda držia 4:3, aby sa práca zobrazila celá. */
.p-grid-featured .p-thumb{aspect-ratio:4/3;}

/* V sekcii sú vedľa seba práce na šírku aj na výšku. Keby si každá držala
   vlastný pomer, náhľady by mali rôznu výšku a nadpisy by sa rozišli. Rám je
   preto všade rovnaký a obrázok v ňom celý, nie orezaný na výplň. */
.cat-projects .p-thumb,
.cat-projects .p-thumb.is-portrait,
.cat-projects .p-thumb.is-landscape,
.cat-projects .p-thumb.is-square{aspect-ratio:4/3;background:#fff;}
.cat-projects .p-thumb img{object-fit:contain;padding:8px;}
/* V druhej mriežke musia byť všetky náhľady rovnaké, inak sa nadpisy rozídu
   do rôznych výšok. Preto tu pomer strán prebíja orientáciu projektu. */
.p-grid-more .p-thumb{aspect-ratio:1/1;}
.p-grid-more h3{font-size:var(--fs-body);}

/* kotvy sekcií — aby nadpis neskončil tesne pod okrajom okna */
.cat-projects[id]{scroll-margin-top:24px;}

/* odkaz na životopis v sekcii O mne */
.cv-download{margin:0;font-size:var(--fs-body);}
.cv-download a{color:var(--terra);font-weight:600;transition:opacity .2s ease;}
.cv-download a:hover{opacity:.72;}
.cv-download .sep{margin:0 12px;color:rgba(120,105,90,.5);}

/* ================= ROZCESTNÍK SEKCIÍ (portfolio.html) =================
   Tlačidlo v úvodnom banneri viedlo priamo do jednej sekcie a zvyšok práce
   ostal skrytý v menu. Tu je každá sekcia obrázok, ktorý na ňu vedie. */
.sections{padding:var(--sp-gap) 0 0;}
.sec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,2.6vw,38px);
}
.sec-card{
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--rule-soft,rgba(120,105,90,.22));
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sec-card:hover{
  transform:translateY(-4px);
  border-color:var(--terra);
  box-shadow:0 22px 48px rgba(90,66,42,.18);
}
/* flex:0 0 auto — inak sa náhľad vo vyššej karte natiahne a náhľady vedľa
   seba prestanú byť rovnako vysoké. */
.sec-pic{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/10;
  background:#fff;
  overflow:hidden;
}
.sec-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.sec-empty{
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(90,80,66,.55);
}
.sec-body{display:flex;flex-direction:column;padding:18px 20px 20px;}
.sec-count{
  font-size:calc(var(--fs-small) * .84);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:7px;
}
.sec-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  line-height:1.2;
  color:var(--dark);
  margin-bottom:6px;
}
.sec-lead{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--muted);
  margin-bottom:12px;
}
.sec-link{
  margin-top:auto;
  font-size:var(--fs-small);
  letter-spacing:.04em;
  font-weight:600;
  color:var(--terra);
  transition:color .2s ease;
}
.sec-card:hover .sec-link{color:#a4512c;}

/* ================= STRÁNKA NA STIAHNUTIE ================= */
.downloads{padding:var(--sp-gap) 0 0;}
.dl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,2.6vw,38px);
}
.dl-card{
  display:flex;
  flex-direction:column;
  padding:26px 26px 24px;
  border-radius:12px;
  background:var(--cream);
  border:1px solid var(--rule-soft,rgba(120,105,90,.22));
}
.dl-card h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-card);
  line-height:1.2;
  color:var(--dark);
}
.dl-card p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--muted);}
.dl-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-top:auto;
  padding-top:20px;
}
/* .cta-btn je krémové na tmavom páse; na krémovej karte by zmizlo. */
.dl-btn{
  display:inline-block;
  background:var(--terra);
  color:#fff;
  font-size:var(--fs-small);
  letter-spacing:.09em;
  font-weight:600;
  text-transform:uppercase;
  padding:14px 30px;
  border-radius:32px;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease;
}
.dl-btn:hover{transform:translateY(-2px);background:#a4512c;}
.dl-view{
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--terra);
  transition:opacity .2s ease;
}
.dl-view:hover{opacity:.72;}

/* ================= LUPA =================
   Náhľady sú zmenšené, aby stránka čítala ako celok. Detail sa dá pozrieť
   kliknutím. Bez JavaScriptu odkaz jednoducho otvorí obrázok, takže to
   funguje aj vtedy, keď sa skript nenačíta. */
.lbx{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,52px);
  background:rgba(28,22,16,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.lbx.open{opacity:1;visibility:visible;}
.lbx-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%;}
.lbx-fig img{
  max-width:100%;
  max-height:calc(100vh - 150px);
  width:auto;height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.lbx-cap{
  margin:0;
  font-size:var(--fs-small);
  letter-spacing:.05em;
  color:rgba(255,255,255,.78);
  text-align:center;
  max-width:60ch;
}
.lbx-btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.lbx-btn:hover{background:rgba(255,255,255,.26);}
.lbx-close{top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);}
.lbx-prev{left:clamp(8px,1.6vw,22px);top:50%;transform:translateY(-50%);}
.lbx-next{right:clamp(8px,1.6vw,22px);top:50%;transform:translateY(-50%);}
.lbx-btn[hidden]{display:none;}
body.lbx-lock{overflow:hidden;}
@media (max-width:620px){
  .lbx-prev,.lbx-next{top:auto;bottom:14px;transform:none;}
  .lbx-fig img{max-height:calc(100vh - 190px);}
}

/* ======================= REFERENCIE ======================= */
/* Sekcia je zámerne tichá. Stojí medzi „o mne" a kontaktom, teda tam, kde
   už návštevník videl prácu aj človeka a chýba mu len cudzie potvrdenie. */
.quotes{padding:var(--sp-sect) 0;}
.quote-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.4vw, 34px);
  margin-top:28px;
}
.quote{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0;
  padding:26px 26px 24px;
  background:var(--cream);
  border:1px solid rgba(103,99,64,.16);
  border-radius:3px;
}
.quote blockquote{
  position:relative;
  margin:0;
  padding-top:16px;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.62;
  color:var(--ink);
}
/* Úvodzovky sú ozdoba, čítačke obrazovky ich netreba hlásiť. Otváracia
   visí nad textom, zatváracia ide inline za posledné slovo, aby sa pri
   krátkom poslednom riadku neodtrhla od textu. */
.quote blockquote::before{
  content:"\201C";
  position:absolute;
  top:-14px;
  left:-4px;
  font-family:var(--serif);
  font-size:3.4rem;
  line-height:1;
  color:var(--sage);
}
.quote blockquote::after{
  content:"\201D";
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:0;
  vertical-align:-.42em;
  margin-left:.06em;
  color:var(--sage);
}
.quote figcaption{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(103,99,64,.16);
}
/* Logo býva široký nápis, nie štvorec, tak dostane radšej šírku než výšku. */
.quote-logo{
  flex:0 0 auto;
  width:auto;
  max-width:150px;
  max-height:40px;
  object-fit:contain;
  object-position:left center;
}
/* Značka v kocke alebo v kruhu je štvorec, tak dostane pevný rozmer
   namiesto širokého pásu. */
.quote-logo.is-znacka{
  width:64px;
  height:64px;
  max-width:none;
  max-height:none;
}
@media (max-width:520px){
  .quote figcaption{align-items:flex-start;flex-direction:column;gap:12px;}
  .quote-logo{max-width:130px;}
  .quote-logo.is-znacka{width:56px;height:56px;}
}
.quote-said{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.quote-who{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--terra);
}
.quote-role{
  font-size:var(--fs-label);
  letter-spacing:.04em;
  color:var(--muted);
}

/* Jedna referencia sa neroztiahne cez tri stĺpce, ale ostane v strede
   v čitateľnej šírke. */
.quote-grid .quote:only-child{
  grid-column:1 / -1;
  max-width:44rem;
  margin:0 auto;
}

/* Pätička má vlastnú linku navrchu. Keď nad ňou stoja referencie, ktoré už
   majú svoju plochu, je tá linka navyše. Skryje sa jej len orámovanie, nie
   celý prvok, inak by zmizli aj jej okraje a logo by sa nalepilo na sekciu. */
#referencie + .site-footer .footer-rule{border-top:0;}

@media (max-width:900px){
  .quote-grid{grid-template-columns:1fr 1fr;}
  .quote-grid .quote:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width:620px){
  .quote-grid{grid-template-columns:1fr;}
  .quote-grid .quote:last-child:nth-child(odd){grid-column:auto;}
}