/* =========================================================================
   Dechev Visuals — Rental catalogue
   Modernized theme: dark, techy, cinema accents. Content/markup unchanged;
   this file only restyles the existing elements/classes from the page.
   ========================================================================= */

:root{
  --bg:            #0a0b0d;
  --bg-alt:        #101216;
  --panel:         #16181d;
  --panel-2:       #1c1f25;
  --border:        #2a2e35;
  --text:          #e8e6e0;
  --text-dim:      #a3a7ad;
  --gold:          #f0c53d;   /* cinema tungsten / key light */
  --gold-soft:     rgba(240,197,61,0.14);
  --teal:          #3fd0c9;   /* cinema teal / grade complement */
  --teal-soft:     rgba(63,208,201,0.14);
  --red:           #c23b1f;   /* brand red, kept from original */
  --font-sans:     'Inter', Arial, Helvetica, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;
  --radius:        10px;
  --maxw:          1080px;
}

*{ box-sizing: border-box; }

html{
  background: var(--bg);
  scroll-padding-top: 84px; /* keeps in-page anchor targets clear of the sticky nav */
  scroll-behavior: smooth;
  /* Mobile browsers silently "boost" text size for readability when a page
     has no viewport meta tag -- this happens even though it doesn't show up
     as a changed font-size in devtools, and it's enough to change how inline
     content (e.g. the nbsp-separated image pairs on home.html) wraps versus
     desktop. Disabling it is the standard fix and is required for the
     "mobile renders exactly like desktop" goal from round 18 to actually
     hold for width-sensitive inline layouts, not just for the general page
     scale. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h2[id]{
  scroll-margin-top: 84px;
}

body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-sans);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* Without a <meta name="viewport"> tag (see round 18), mobile browsers
     fall back to an assumed ~980px "layout viewport" -- narrower than most
     real desktop browser windows. Content that's wide enough to be a
     non-issue on desktop (e.g. two 320px images side by side, with margins,
     on home.html) can then wrap differently purely because 980px < the
     desktop window it was eyeballed against. Forcing a hard min-width equal
     to the design's own max content width (--maxw) means the layout always
     computes against the same box on every device -- mobile just gets a
     horizontal scrollbar/pinch-zoom instead of reflowing, which is exactly
     the "identical to desktop" behavior that was asked for. */
  min-width: var(--maxw);
}

/* Subtle cinema vignette + faint scanline texture on the page chrome only
   (never applied to photos/images). */
body{
  background-image:
    radial-gradient(ellipse at top, rgba(240,197,61,0.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(63,208,201,0.05), transparent 55%);
  background-attachment: fixed;
}

#container{
  width: auto;
  max-width: var(--maxw);
  padding: 0 20px 80px;
  margin: 0 auto;
}

a img{ border: none; }

img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a:hover > img{
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(240,197,61,0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* Inline thumbnail galleries (backstage photo rows, small linked stills on
   the services/discounts pages) sit right next to each other in the markup
   with only a single space between -- give them breathing room and let them
   wrap into a tidy row. Placed early in the cascade so the more specific
   .gear-card-media rule (rental.html's product cards) still wins there. */
.style1 img, .style1centered img, .style1right img{
  margin: 4px 6px 4px 0;
  vertical-align: top;
}

.float-right{
  float: right;
  margin: 4px 0 14px 18px;
}

/* ---------- Links ---------- */
a:link, a:visited{
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover, a:active{
  color: var(--gold);
  border-bottom: 1px dashed var(--gold);
}

/* ---------- Sticky nav ---------- */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,11,13,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav::after{
  content: "";
  display: block;
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--gold) 0 10px,
    transparent 10px 22px
  );
  opacity: .5;
}
.site-nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-nav .brand{
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-size: 14px;
  white-space: nowrap;
}
.nav-catalogue{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--bg) !important;
  background: linear-gradient(155deg, #5ee8e0 0%, var(--teal) 55%, #1f8f89 100%);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(63,208,201,0.25), 0 4px 14px rgba(63,208,201,0.35);
}
.nav-catalogue:hover{
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(63,208,201,0.35), 0 6px 18px rgba(63,208,201,0.5);
}
.nav-links{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  overflow-x: auto;
}
.nav-links a{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover{
  color: var(--gold);
  border-color: var(--gold-soft);
  background: var(--gold-soft);
}
.nav-links a.is-primary{
  color: var(--bg);
  background: var(--gold);
  font-weight: 700;
}
.nav-links a.is-primary:hover{
  color: var(--bg);
  background: var(--gold);
  filter: brightness(1.1);
}

/* ---------- Headings ---------- */
h1{
  text-align: center;
  color: var(--gold) !important;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  font-family: var(--font-sans);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 28px 0 20px !important;
  padding: 22px 16px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* homepage name headline -- rendered as a graphical badge/button-style
   element (gradient pill, glow, inset highlight) rather than plain boxed
   text, even though it isn't a link and does nothing when clicked */
.home-headline{
  display: block;
  width: fit-content;
  text-align: center;
  margin: 32px auto 6px !important;
  padding: 20px 56px !important;
  background: linear-gradient(155deg, #ffe27a 0%, var(--gold) 55%, #c9971f 100%) !important;
  color: #1a1200 !important;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px !important;
  box-shadow:
    0 0 0 1px rgba(240,197,61,0.4),
    0 14px 34px rgba(240,197,61,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
  font-size: clamp(26px, 4.5vw, 42px) !important;
  letter-spacing: 2px !important;
  cursor: default;
}
.home-headline::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 16px;
  vertical-align: middle;
  border-radius: 50%;
  background: #1a1200;
  opacity: .5;
}

/* homepage hero image-buttons row: give the 5 linked images generous
   breathing room instead of relying on the original's <br/>/&nbsp; spacing.
   Pulled the container's own top padding way down too, so the gap above the
   first row (right under the "Emilian Dechev" badge) stays tight even as
   the between-image spacing grows. */
.home-hero-links{
  padding-top: 2px !important;
}
.home-hero-links p{
  margin-top: 0 !important;
}
.home-hero-links img{
  /* asymmetric on purpose: small top margin keeps the very first row close
     under the headline badge, generous bottom+side margins give the images
     themselves (and the rows below) plenty of breathing room */
  margin: 10px 44px 40px 44px !important;
}

h2{
  text-align: left;
  color: var(--bg) !important;
  background: var(--gold) !important;
  font-family: var(--font-sans);
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 56px 0 0 !important;
  padding: 12px 20px !important;
  border-radius: var(--radius) var(--radius) 0 0;
}
h2:first-of-type{ margin-top: 8px !important; }

/* every h2 opens a "panel": give the content that follows a matching
   dark panel background + padding so sections read as distinct blocks */
.style1, .style1right, .style1left, .style1centered, .style1_LEFT_float, .style1centered1{
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 24px 24px 8px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  overflow: hidden; /* contain the many floated thumbnails */
}
.style1centered{ text-align: center; }
.style1right{ text-align: right; }
.style1left{ text-align: left; }

/* category dividers inside the gear list, e.g. "CAMERA", "GIMBALS" */
.style1centered_HL{
  display: block;
  width: fit-content;
  margin: 12px auto 28px !important;
  padding: 8px 22px !important;
  background: transparent !important;
  color: var(--teal) !important;
  font-family: var(--font-mono);
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--teal-soft);
  border-radius: 999px;
  background: var(--teal-soft) !important;
}

/* ---------- Gear catalog: boxed / gridded product cards ---------- */
.gear-catalog{
  padding: 8px 8px 8px !important;
}
.gear-cat-title{
  display: block;
  width: fit-content;
  margin: 40px auto 20px !important;
  padding: 8px 22px !important;
  color: var(--teal) !important;
  font-family: var(--font-mono);
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--teal-soft);
  border-radius: 999px;
  background: var(--teal-soft) !important;
}
.gear-catalog > .gear-grid:first-of-type{ margin-top: 0; }

.price-note{
  max-width: 640px;
  margin: 8px auto 32px;
  padding: 16px 24px;
  text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.4;
}
.price-note .just-gold{ font-size: inherit; }

/* one column of full-width rows, not a multi-column grid -- each product
   is its own horizontal box: text on the left, image(s) flush right */
.gear-grid{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 44px;
}

.gear-card{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gear-card:hover{
  border-color: rgba(240,197,61,0.45);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.gear-card-body{
  flex: 1 1 auto;
  min-width: 0; /* allow text to wrap instead of stretching the row */
}
.gear-card.no-media .gear-card-body{ flex-basis: 100%; }

/* the image column: flush right, images stacked one above another when an
   item has more than one -- this is the only case the box grows taller for */
.gear-card-media{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 200px;
}

/* Preserve each image's real aspect ratio (files vary: 240x160, 240x120,
   120x180 portrait, etc.) instead of cropping everything into one fixed
   box -- that was distorting/mis-cropping the non-standard sizes. */
.gear-card .float-right,
.gear-card-media img{
  float: none !important;
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 !important;
  border-radius: 8px;
}

.gear-card p{
  margin-bottom: .6em;
  font-size: 14.5px !important;
}
.gear-card-body > :first-child{ margin-top: 0; }
.gear-card-body > :last-child{ margin-bottom: 0; }

/* item titles / prices */
.just-gold{
  color: var(--gold) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}
.just-gold1{
  color: var(--gold) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.just-pink{
  color: var(--teal) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}
.small-right{
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
}

p{
  color: var(--text);
  margin-bottom: .85em;
}
strong{ color: var(--text); }

/* collapse the long runs of <br><br><br> used as manual spacers into a
   single, consistent gap instead of large dead whitespace */
br{ line-height: 1.4; }
br + br{ display: none; }

hr, .style1centered:has(> span:only-child){ opacity: .35; }

/* ---------- Hero / CTA button ---------- */
/* Deliberately NOT gold here -- gold is already used everywhere else (h1/h2
   panels, the nav pill, the sprocket-hole strip), so a gold button disappears
   into the page. Cinema "tally light" red makes it read as its own,
   unmissable call to action instead. */
.btn-gearbuilder,
.btn-gearbuilder:link,
.btn-gearbuilder:visited{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(155deg, #ff5b3d 0%, var(--red) 65%, #8f2313 100%);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 18px 44px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 0 4px rgba(194,59,31,0.16), 0 12px 32px rgba(194,59,31,0.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-gearbuilder::before{
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
  flex: none;
  animation: gearbuilder-tally 1.6s ease-in-out infinite;
}
@keyframes gearbuilder-tally{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}
.btn-gearbuilder:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
  box-shadow: 0 0 0 5px rgba(194,59,31,0.22), 0 16px 38px rgba(194,59,31,0.55);
  color: #fff !important;
  border-bottom: none !important;
}

/* Lighting Builder button: same shape/animation as .btn-gearbuilder, cool
   blue/teal gradient instead of the camera builder's orange-red, so the
   two buttons are easy to tell apart at a glance. */
.btn-lightingbuilder,
.btn-lightingbuilder:link,
.btn-lightingbuilder:visited{
  background: linear-gradient(155deg, #3ddbff 0%, #1e6fd9 65%, #123a8f 100%);
  box-shadow: 0 0 0 4px rgba(30,111,217,0.16), 0 12px 32px rgba(30,111,217,0.45);
}
.btn-lightingbuilder:hover{
  box-shadow: 0 0 0 5px rgba(30,111,217,0.22), 0 16px 38px rgba(30,111,217,0.55);
}

/* ---------- Responsive ----------
   Deliberately none: the site should render identically on mobile and
   desktop (see round 18) -- no @media reflow rules, and no viewport meta
   tag on any page, so phones render the full desktop layout (pinch-zoom to
   read, same as any pre-mobile-era site) instead of a distinct "mobile
   version". */

/* ---------- Round 25: filmmaking_* / photography_* / pricing_post /
   dechev_visuals / filmmaking secondary-page pass ----------
   These pages keep their own simple structure (no rental nav bar) but pick
   up the shared look through the classes below plus everything already
   defined above (.style1*, .just-gold, h1/h2, #container, global a/img). */

/* two-thumbnail-per-row layout used on filmmaking_clips.html */
.Image_float{
  float: left;
  margin: 4px 18px 14px 0;
}

/* two-column layout used on the music-video / completed-films pages.
   inline-block (not float) so the pair never needs a clearfix -- #container
   has no overflow/clearfix of its own to contain floated children. */
.column{
  display: inline-block;
  vertical-align: top;
  width: 48%;
  margin: 0 1%;
  box-sizing: border-box;
}
.column .style1left,
.column .style1{
  border-radius: var(--radius);
  border-top: 1px solid var(--border);
  margin: 0 10px 20px;
}

/* page-title bar used on the photography gallery pages, in place of an h1 */
.yellowbox1200{
  display: block;
  text-align: center;
  color: var(--gold) !important;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  font-family: var(--font-sans);
  font-size: clamp(20px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 28px 0 20px !important;
  padding: 20px 16px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.centered{ text-align: center; }

/* the old rollover back-button image is gone; nothing else references this
   class any more, kept as a harmless no-op in case an old page still has it */
.picture-noborder{ border: none; }

/* ---------- Restyled back-to-home link (replaces the old JS rollover
   image button on every secondary page) ---------- */
.btn-back,
.btn-back:link,
.btn-back:visited{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 12px;
  padding: 12px 26px;
  background: var(--panel);
  color: var(--teal) !important;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-back:hover, .btn-back:active{
  color: var(--gold) !important;
  border-color: var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft) !important;
  transform: translateX(-2px);
}

/* ---------- Photography thumbnail grid (replaces the old nested-table
   dotted-border gallery on the 5 photography_*.html pages) ---------- */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(4, 160px);
  justify-content: center;
  gap: 22px;
  margin: 24px auto;
  padding: 0;
}
.photo-grid a{ display: block; }
.photo-grid img{
  width: 160px;
  height: 160px;
  object-fit: cover;
}

/* ---------- Film showcase item (image + caption block) ----------
   Used on filmmaking.html: replaces the old plain-text captions that sat
   inline right after each image, separated only by manual <br> stacks for
   spacing -- fragile, and easy to misread as running into the next image.
   Each entry is now its own self-contained, generously spaced block with
   the caption styled clearly below the image. */
.film-item{
  display: block;
  text-align: center;
  margin: 0 auto 64px;
}
.film-item:last-of-type{
  margin-bottom: 32px;
}
.film-item img{
  margin: 0 auto !important;
  display: inline-block;
}
.film-caption{
  margin: 18px 0 0 !important;
  color: var(--teal);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Utility: center a specific h2 and give it more breathing room below before
   the content that follows (used on filmmaking.html's section heading,
   which sits right above the film-item image blocks rather than opening a
   .style1/.style1centered text panel like most other h2s do). */
.h2-centered{
  text-align: center !important;
  margin-bottom: 32px !important;
}

/* ---------- Multi-line film details (title + role + extra links) ----------
   Richer variant of .film-caption for entries that need more than a single
   short label underneath the image -- used in the filmmaking_movies.html
   COMPLETED FILMS columns, where each entry has a title, a role/credits
   line, and sometimes one or more extra links (making-of, article, etc). */
.film-details{
  margin: 14px auto 0 !important;
  max-width: 320px;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
}
.film-title{
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
}

/* ---------- Two-per-row clip layout (Round 34) ----------
   Used on filmmaking_clips.html: replaces the old .Image_float/.float-right
   float pairing (thumbnail + caption crammed together via manual <br>
   stacks) with a flex row of self-contained items, each with its caption
   (.film-caption) styled clearly below it. gap/margin-bottom give even,
   generous spacing both between the two thumbnails in a row and between
   rows -- the .Image_float/.float-right classes stay defined above since
   this file's <img> tags still carry them (harmless now that layout is
   flex-driven, kept only so no attribute edits were needed on the images
   themselves). */
.clip-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin: 0 auto 48px;
}
.clip-item{
  display: block;
  text-align: center;
  width: 320px;
  max-width: 100%;
}
.clip-item img{
  width: 320px;
  height: 180px;
  object-fit: cover;
  margin: 0 auto !important;
  display: block;
  float: none !important;
}

/* Force all line breaks to execute regardless of layout compression */
p br {
  display: block;
  content: "";
  margin-top: 0;
}