/* ─── Our Work page — scoped styles ─────────────────────────────────────────
   Relies on style.css for: .navbar, .final-cta__*, .site-footer__* shared tokens.
   Everything here is prefixed .ow- to avoid collisions.
──────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Rothefight';
  src: url('assets/fonts/ROTHEFIGHT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Same accent palette as about.css, so this page reads as the same brand. */
:root {
  --ow-blue:   #4f7dff;
  --ow-violet: #9b6bff;
  --ow-pink:   #ff4fa3;
  --ow-cyan:   #2fc2e8;
  --ow-gold:        #c8a34c;
  --ow-gold-light:  #f6e6bd;
  --ow-gold-dark:   #5a4210;
}

.ow-title,
.ow-intro,
.ow-grid-section,
.final-cta {
  font-family: 'Inter', sans-serif;
}

/* ─── Title: plain heading on white, no photo ────────────────────────────── */
/* Same treatment as .svc-hero__heading (services.html) — Rothefight display
   font, dark text — just without the off-white band or house illustration. */

.ow-title {
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  padding: clamp(150px, 20vw, 210px) 24px clamp(48px, 6vw, 90px);
}

.ow-title__heading {
  font-family: 'Rothefight', sans-serif;
  font-weight: normal;
  font-size: clamp(56px, 12vw, 150px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #1a1816;
  margin: 0;
  text-align: center;
  user-select: none;
}


/* ─── Intro ──────────────────────────────────────────────────────────────── */

.ow-intro {
  position: relative;
  background: #fff;
  padding: calc(1vw + 8px) 24px calc(2vw + 12px);
  text-align: center;
}

/* Thin gold divider between the hero heading above and the eyebrow/subheading
   below it — flared out via a gradient fade at both ends instead of a hard edge. */
.ow-intro__divider {
  width: min(240px, 60%);
  height: 1px;
  margin: 0 auto 2rem;
  background: linear-gradient(to right, transparent, var(--ow-gold), transparent);
}

.ow-intro__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.25rem;
}

/* Cursive heading — same treatment as .final-cta__heading / .intro__heading
   elsewhere on the site (Cormorant SemiBold/Bold Italic). */
.ow-intro__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #2e2c2c;
  max-width: 720px;
  margin: 0 auto;
}

/* ─── Shoot Grid ─────────────────────────────────────────────────────────── */

.ow-grid-section {
  background: #fff;
  padding: calc(2vw + 16px) 24px calc(4vw + 32px);
}

.ow-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.ow-card {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 4 / 3;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Gold beveled frame: solid gold edge, a bright inset highlight right at
     the border (simulating light catching a raised edge), then a darker
     gold-brown inset a couple pixels in (simulating the recessed bevel), plus
     a soft drop shadow so the whole frame lifts off the white page. */
  border: 2px solid var(--ow-gold);
  box-shadow:
    inset 0 0 0 0.75px rgba(246, 230, 189, 0.7),
    inset 0 0 0 3px rgba(90, 66, 16, 0.45),
    0 14px 34px rgba(0, 0, 0, 0.14);
}

.ow-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 0.75px rgba(246, 230, 189, 0.7),
    inset 0 0 0 3px rgba(90, 66, 16, 0.45),
    0 20px 42px rgba(0, 0, 0, 0.18);
}

.ow-card__image-wrap {
  position: absolute;
  inset: 0;
}

.ow-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.ow-card:hover .ow-card__image {
  transform: scale(1.05);
}

/* Dark scrim at the bottom of the card so the white address text stays
   legible over any photo, regardless of how bright it is. */
.ow-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  overflow: hidden;
  padding: 3rem 1.75rem 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0) 100%);
}

.ow-card__address {
  /* min-width: 0 overrides the flex-item default (min-width: auto), which
     otherwise uses the text's unbreakable min-content width and can force
     the flex row wider than the card — the classic flexbox overflow trap. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.ow-card__view {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ow-card:hover .ow-card__view {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Final CTA ──────────────────────────────────────────────────────────── */

.final-cta__heading {
  white-space: normal;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .ow-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ow-title {
    padding-top: 80px;
  }
  .ow-intro__heading {
    font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  }
  .ow-card__view {
    /* No hover on touch devices — show it plainly instead of hiding a
       reveal-on-hover state the user can't trigger. */
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RTL OVERRIDES — Arabic (applied when <html dir="rtl">)
   ───────────────────────────────────────────────────────────────────────────── */

[dir="rtl"] .ow-title__heading {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: clamp(2.4rem, 8vw, 6rem);
  letter-spacing: 0;
}

[dir="rtl"] .ow-intro__heading {
  font-family: 'Noto Naskh Arabic', serif;
  font-style: normal;
}

[dir="rtl"] .ow-card__address {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}