/* ==========================================================================
   Nordae Bank – photography components (hero photos, product cards, bands)
   ========================================================================== */

/* Photo hero (inner product pages) */
.photo-hero { position: relative; color: #fff; overflow: hidden; background: var(--n-navy); }
.photo-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.photo-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(10, 27, 69, .96) 0%, rgba(10, 27, 69, .86) 42%, rgba(18, 58, 154, .45) 100%); }
.photo-hero .wrap { position: relative; z-index: 2; padding: 76px 0 84px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.photo-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -.03em; line-height: 1.08; }
.photo-hero h1 em { font-style: normal; background: linear-gradient(90deg, #2dd4bf, #7ee8d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.photo-hero p.lead { color: #c3d0f5; font-size: 1.12rem; max-width: 540px; margin: 16px 0 26px; }
.photo-hero .crumbs { margin-bottom: 16px; }
.photo-hero .hero-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.photo-hero .hero-facts div b { display: block; font-size: 1.7rem; letter-spacing: -.02em; }
.photo-hero .hero-facts div span { color: #a9bdf2; font-size: .82rem; }
.photo-hero .hero-photo { border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .18); aspect-ratio: 4 / 3.2; position: relative; }
.photo-hero .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hero .hero-photo .chip { position: absolute; left: 16px; bottom: 16px; background: rgba(255, 255, 255, .96); color: var(--n-ink); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: .84rem; box-shadow: var(--n-shadow-lg); display: flex; gap: 10px; align-items: center; }
.photo-hero .hero-photo .chip i { color: var(--n-teal-600); }

/* Framed figure */
.fig { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--n-shadow-lg); min-height: 320px; background: var(--n-sky); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.fig.tall { min-height: 440px; }
.fig .badge { position: absolute; left: 18px; bottom: 18px; right: 18px; max-width: 280px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-radius: 16px; padding: 14px 16px; box-shadow: var(--n-shadow-lg); }
.fig .badge b { display: block; color: var(--n-navy); font-size: .95rem; } .fig .badge span { color: var(--n-muted); font-size: .82rem; }
.fig .badge.tr { left: auto; right: 18px; bottom: auto; top: 18px; }
.fig.contain { background: linear-gradient(135deg, #e8efff, #dcf8f3); }
.fig.contain img { object-fit: contain; padding: 16px; }

/* Product image cards */
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--n-line); border-radius: 24px; overflow: hidden; color: inherit; transition: transform .22s, box-shadow .22s; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--n-shadow-lg); color: inherit; }
.pcard .ph { height: 190px; position: relative; overflow: hidden; background: var(--n-sky); }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.pcard:hover .ph img { transform: scale(1.06); }
.pcard .ph .tag { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--n-navy); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; box-shadow: var(--n-shadow); }
.pcard .ph .tag.new { background: var(--n-teal); }
.pcard .pb { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard h3 { font-size: 1.18rem; margin: 0; }
.pcard p { margin: 0; color: var(--n-muted); font-size: .93rem; }
.pcard .go { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .9rem; color: var(--n-blue); }
.pcard .go i { transition: transform .2s; margin-left: 4px; } .pcard:hover .go i { transform: translateX(4px); }
.g4p { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Full-width photo band */
.photo-band { position: relative; border-radius: 30px; overflow: hidden; color: #fff; background-size: cover; background-position: center; min-height: 340px; display: flex; align-items: center; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 27, 69, .94), rgba(10, 27, 69, .55) 70%, rgba(10, 27, 69, .2)); }
.photo-band .inner { position: relative; padding: 48px 56px; max-width: 640px; }
.photo-band h2 { color: #fff; } .photo-band p { color: #cfdcff; }

/* Mosaic */
.mosaic { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 460px; }
.mosaic .m { border-radius: 22px; overflow: hidden; position: relative; background: var(--n-sky); }
.mosaic .m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.mosaic .m:hover img { transform: scale(1.05); }
.mosaic .m.big { grid-row: span 2; }
.mosaic .m span { position: absolute; left: 14px; bottom: 14px; background: rgba(10, 27, 69, .8); color: #fff; font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }

/* Hero photo for the homepage */
.hero-photo-main { position: relative; max-width: 480px; margin-inline: auto; width: 100%; }
.hero-photo-main .ph { border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 4.6; box-shadow: 0 40px 80px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .2); }
.hero-photo-main .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-main .mock-card { position: absolute; width: 270px; left: -56px; bottom: 40px; padding: 18px; transform: rotate(-4deg); }
.hero-photo-main .mock-card .num { margin: 22px 0 12px; font-size: 1rem; }
.hero-photo-main .mock-panel { position: absolute; right: -24px; top: 34px; margin: 0; width: 250px; }
.hero-photo-main .mock-panel .ln { font-size: .8rem; }

/* Rate strip */
.rate-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border: 1px solid var(--n-line); border-radius: 22px; overflow: hidden; }
.rate-strip > div { padding: 24px 26px; border-right: 1px solid var(--n-line); }
.rate-strip > div:last-child { border-right: 0; }
.rate-strip b { display: block; font-size: 2rem; letter-spacing: -.03em; color: var(--n-navy); }
.rate-strip small { color: var(--n-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.rate-strip span { display: block; color: var(--n-muted); font-size: .86rem; margin-top: 2px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 960px) {
  .photo-hero .wrap { grid-template-columns: 1fr; padding: 56px 0 64px; gap: 32px; }
  .photo-hero .hero-photo { aspect-ratio: 16 / 10; }
  .g4p { grid-template-columns: repeat(2, 1fr); }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .mosaic .m { height: 200px; } .mosaic .m.big { grid-row: auto; grid-column: span 2; height: 240px; }
  .photo-band .inner { padding: 34px 26px; }
  .rate-strip { grid-template-columns: 1fr 1fr; } .rate-strip > div { border-bottom: 1px solid var(--n-line); }
  .hero-photo-main .mock-card { left: -10px; width: 220px; } .hero-photo-main .mock-panel { right: -8px; width: 210px; }
}
@media (max-width: 560px) {
  .g4p { grid-template-columns: 1fr; }
  .hero-photo-main .mock-panel { display: none; }
  .hero-photo-main .mock-card { left: 12px; bottom: 16px; }
}