/* 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; }

/* Text for search engines and screen readers only (e.g. the homepage
   heading when the hero carries no text). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 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); }

/* ── Contact form ─────────────────────────────────────────── */
input, textarea, select { font-family: Jost, sans-serif; }
::placeholder { color: #b3aea7; }

.f-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d8d4ce;
  background: transparent;
  padding: 8px 0;
  font: 300 17px/1.4 Jost, sans-serif;
  color: #1a1a1a;
  transition: border-color .3s;
}
textarea.f-input { line-height: 1.6; resize: none; }
.f-input:focus { outline: none; border-bottom-color: #1a1a1a; }
.f-input.has-error { border-bottom-color: #a32c2c; }

.f-label {
  font: 400 11px/1 Jost, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.f-error { font: 300 13px/1.5 Jost, sans-serif; color: #a32c2c; }

/* Event-type chips are real radios, so the form works without JS. */
.f-chip { position: relative; display: inline-flex; }
.f-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.f-chip span {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  font: 400 12px/1 Jost, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid #d8d4ce;
  background: transparent;
  color: #5a5650;
  transition: background .3s, color .3s, border-color .3s;
}
.f-chip input:hover + span { border-color: #b3aea7; }
.f-chip input:checked + span { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.f-chip input:focus-visible + span { outline: 2px solid #1a1a1a; outline-offset: 2px; }

.f-submit {
  padding: 18px 42px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font: 400 12px/1 Jost, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .3s;
}
.f-submit:hover { opacity: .82; }

/* Bots fill in everything they can see; this one is not visible. */
.f-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dc-mobile .f-chip span { min-height: 44px; padding: 0 18px; font-size: 11px; }
.dc-mobile .f-submit { width: 100%; min-height: 56px; padding: 0; text-align: center; }