/* Marco's Flower Design — base + interaction styles.
   Layout lives in inline styles copied verbatim from the mockups.
   This file only carries what inline styles cannot: hover states,
   the desktop/mobile breakpoint switch, and keyframes. */

body { margin: 0; background: #e8e5e0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
* { box-sizing: border-box; }

@keyframes heroPanA { from { transform: scale(1.12) translateX(-2.2%); } to { transform: scale(1.12) translateX(2.2%); } }
@keyframes heroPanB { from { transform: scale(1.12) translateX(2.2%); } to { transform: scale(1.12) translateX(-2.2%); } }

/* ── Desktop / mobile switch ────────────────────────────────
   The two mockups are genuinely different structures, so both
   are rendered and toggled at the desktop min-width (1180px). */
/* !important is required: the mobile wrapper carries an inline
   display:flex (for phone-centering), and inline styles otherwise
   beat these rules — which would leave both blocks visible. */
.dc-desktop { display: none !important; }
.dc-mobile  { display: flex !important; }
@media (min-width: 1180px) {
  body { background: #fff; }
  .dc-desktop { display: block !important; }
  .dc-mobile  { display: none !important; }
}

/* Mobile phone column: fluid below the 390px design width. */
.dc-phone { width: 100%; max-width: 390px; }

/* Mobile has no hover to reveal colour, so all photography stays in
   full colour. !important overrides the inline filter:grayscale(1)
   and the .cat-card-img class filter. */
.dc-mobile img { filter: none !important; }

/* ── Language switch (EN / SR) ────────────────────────────── */
.lang-opt { cursor: pointer; color: #b3aea7; transition: color .25s; }
.lang-opt.is-active { color: #1a1a1a; }

/* ── Hover: nav underline links ───────────────────────────── */
.nav-underline { border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color .25s, color .25s; }
.nav-underline:hover { border-bottom-color: #1a1a1a; }
.nav-underline.is-active { border-bottom-color: #1a1a1a; }

/* Hover: gray-to-dark text links (Archive, All work, breadcrumb) */
.muted-link { color: #8a8a8a; transition: color .25s; }
.muted-link:hover { color: #1a1a1a; }
.muted-soft { color: #8f8a83; transition: color .25s; }
.muted-soft:hover { color: #1a1a1a; }
.crumb-link { transition: color .25s; }
.crumb-link:hover { color: #1a1a1a; }

/* ── Hover: grayscale photography ─────────────────────────── */
.hov-img { filter: grayscale(1); transition: filter .5s; display: block; }
.hov-img:hover { filter: grayscale(0); }

/* Hover: grayscale + zoom (wrapped in an overflow:hidden box) */
.zoom-box { overflow: hidden; }
.zoom-img { filter: grayscale(1); transform: scale(1); transition: transform 1s ease, filter .6s; display: block; }
.zoom-box:hover .zoom-img { transform: scale(1.04); filter: grayscale(0); }
.zoom-img-sm { filter: grayscale(1); transform: scale(1); transition: transform 1s ease, filter .6s; display: block; }
.zoom-box:hover .zoom-img-sm { transform: scale(1.05); filter: grayscale(0); }

/* ── Category header + card reveal ────────────────────────── */
/* --d = per-item stagger delay, set inline by PHP/JS. */
.cat-head { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.cat-head.leaving { opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; }

.cat-card { opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease var(--d,0ms), transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms); }
.cat-card-imgwrap { overflow: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .85s cubic-bezier(.22,.61,.36,1) var(--d,0ms); }
.cat-card-img { filter: grayscale(1); transform: scale(1.09); display: block;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1) var(--d,0ms), filter .6s; }

.cat-grid.in .cat-card { opacity: 1; transform: translateY(0); }
.cat-grid.in .cat-card-imgwrap { clip-path: inset(0 0 0 0); }
.cat-grid.in .cat-card-img { transform: scale(1); filter: grayscale(1); }

.cat-grid.leaving .cat-card { transition: opacity .2s ease, transform .2s ease; opacity: 0; transform: translateY(16px); }
.cat-grid.leaving .cat-card-imgwrap { transition: clip-path .26s ease; clip-path: inset(0 0 100% 0); }
.cat-grid.leaving .cat-card-img { transition: transform .26s ease, filter .6s; transform: scale(1.09); }

/* Hover zoom — placed last so it wins over the .in rest state at equal specificity. */
.cat-grid.in .cat-card:hover .cat-card-img { transform: scale(1.045); filter: grayscale(0); }