/* Al-Nafeesa Jewellery: section styles for all pages */

/* ---------- shared bits ---------- */
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* ---------- 7.1 hero ---------- */
.hero { min-height: 100dvh; padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 6rem); display: flex; align-items: center; }
.hero-grid { display: grid; gap: 2rem; width: 100%; }
.hero-visual { order: -1; position: relative; justify-self: center; }
.hero-arch {
  position: relative; z-index: 1; width: min(78vw, 360px, 34svh); aspect-ratio: 4 / 5.4;
  outline: 1px solid var(--line); outline-offset: -14px; background: var(--surface-1);
}
.hero-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-block { position: absolute; z-index: 0; left: -1rem; bottom: -1rem; width: 60%; height: 40%; background: var(--surface-2); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.hero-mark { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.hero-emblem { width: 120px; height: auto; color: var(--gold); }
.hero-emblem .em-rays polygon { transform-box: fill-box; }
.hero-ar { font-family: var(--f-ar-display); font-weight: 700; font-size: 1.5rem; color: var(--gold); line-height: 1.5; }
.hero h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
.hero h1 span { display: block; }
.hero-sub { font-size: 1.125rem; }
.hero-cta { display: grid; gap: .75rem; width: 100%; }
.hero-cta .btn { width: 100%; }
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
  .hero-visual { order: 0; justify-self: end; width: 100%; max-width: 520px; }
  .hero-arch { width: 100%; max-width: 520px; }
  .hero-block { left: -2rem; bottom: -2rem; }
  .hero h1 { font-size: clamp(2.75rem, 6.2vw, 5.75rem); }
  .hero-cta { display: flex; flex-wrap: wrap; width: auto; }
  .hero-cta .btn { width: auto; }
}

/* ---------- 7.2 name ---------- */
.name-sec { text-align: left; }
.name-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.name-inner .emblem { width: 72px; }
.manifesto { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.25; color: var(--ivory); max-width: none; }
.name-ar { font-size: 1.75rem; }
@media (min-width: 768px) {
  .name-inner { align-items: center; text-align: center; }
  .manifesto { font-size: clamp(1.75rem, 3.6vw, 3rem); max-width: 22ch; margin-inline: auto; }
}

/* ---------- 7.3 departments ---------- */
.depts-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bento { display: grid; gap: 14px; }
.bento-cell { position: relative; display: block; overflow: hidden; background: var(--surface-1); color: var(--ivory); }
.bento-a { height: 420px; }
.bento-b, .bento-c { height: 300px; }
.bento-media { position: absolute; inset: -8% 0; will-change: transform; }
.bento-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .9s var(--ease-out); }
.bento-cell::after { content: ""; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; }
.bento-cap { position: absolute; z-index: 2; left: 0; bottom: 0; padding: clamp(1.1rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .5rem; }
.bento-name { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bento-name strong { font-family: var(--f-display); font-weight: 500; font-size: 2rem; line-height: 1.1; color: var(--ivory); }
.bento-name .ar { font-size: 1.4rem; }
.bento-go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.bento-go i { transition: transform .5s var(--ease-out); }
@media (min-width: 768px) {
  .depts-head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 6rem); }
  .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(560px, 80vh, 760px); }
  .bento-a { grid-row: 1 / span 2; height: auto; }
  .bento-b, .bento-c { height: auto; }
}
@media (hover: hover) {
  .bento-cell:hover .bento-media img { transform: scale(1.16); }
  .bento-cell:hover .bento-go i { transform: translate(3px, -3px); }
}

/* ---------- 7.4 horizontal pan ---------- */
.pan { padding-block: var(--section-pad); overflow: hidden; }
.pan-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pan-track {
  display: flex; align-items: flex-start; gap: 1.25rem; padding-inline: 16px; padding-bottom: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
}
.pan-track::-webkit-scrollbar { display: none; }
.pan-frame { flex: none; width: 78vw; scroll-snap-align: start; margin: 0; }
.pan-media { position: relative; overflow: hidden; background: var(--surface-1); }
.pf-tall .pan-media { aspect-ratio: 4 / 5; }
.pf-sq .pan-media { aspect-ratio: 1 / 1; }
.pf-land .pan-media { aspect-ratio: 5 / 4; }
.pan-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pan-frame figcaption { margin-top: .8rem; font-weight: 400; font-size: .875rem; color: var(--ivory-3); }
@media (min-width: 768px) {
  .pan-head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 6rem); }
  .pan-track { gap: 2.5rem; padding-inline: max(16px, calc((100vw - 1320px) / 2)); scroll-padding-inline: max(16px, calc((100vw - 1320px) / 2)); }
  .pan-frame { width: clamp(260px, 28vw, 420px); }
}
.pan.is-pinned { height: 100dvh; padding-block: calc(var(--header-h) + 1rem) 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.pan.is-pinned .pan-head { margin-bottom: 1.5rem; }
.pan.is-pinned .pan-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0; }
.pan.is-pinned .pan-frame { width: clamp(220px, min(28vw, 34dvh), 420px); margin-top: var(--off, 0); }
.pan.is-pinned .pan-media img { transform-origin: center; }

/* ---------- 7.5 canes ---------- */
.canes-head { margin-bottom: 1.5rem; }
.canes-grid { display: block; }
.cane-sticky { display: none; }
.cane-block { margin-bottom: 3rem; }
.cane-fig-mobile { display: block; margin: 0 0 1.25rem; width: min(70vw, 340px); aspect-ratio: 4 / 5.2; position: relative; background: var(--surface-1); }
.cane-fig-mobile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cane-block h3 { margin-bottom: .75rem; }
.canes-ar { font-size: 1.75rem; margin-top: .5rem; }
@media (min-width: 1024px) {
  .canes-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .cane-sticky { display: block; position: sticky; top: 96px; height: calc(100dvh - 140px); }
  .cane-stack { position: relative; height: 100%; max-width: 560px; background: var(--surface-1); outline: 1px solid var(--line); outline-offset: -14px; }
  .cane-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .cane-stack img.is-active { opacity: 1; transform: scale(1); }
  .cane-block { min-height: 70vh; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  .cane-fig-mobile { display: none; }
  .cane-after { padding-bottom: 4rem; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .cane-stack img { transition: none; }
}

/* ---------- 7.6 stones index ---------- */
.stones-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.stones-wrap { display: grid; gap: 2rem; }
.stone-list { display: block; }
.stone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line); padding: 1.1rem 0; break-inside: avoid; color: var(--ivory);
}
.stone-list li:last-child .stone-row { border-bottom: 1px solid var(--line); }
.stone-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; background: var(--surface-1); }
.stone-names { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.stone-en { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--ivory); transition: color .3s; }
.stone-ar { font-family: var(--f-ar); font-weight: 500; font-size: 1rem; color: var(--gold); }
.stone-preview { display: none; }
@media (min-width: 1024px) {
  .stones-head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 6rem); }
  .stones-wrap { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
  .stone-list { columns: 2; column-gap: 2rem; }
  .stone-list li { break-inside: avoid; }
  .stone-list li:nth-child(4) .stone-row { border-bottom: 1px solid var(--line); }
  .stone-row { flex-direction: row; padding: 1.1rem 0; }
  .stone-thumb { display: none; }
  .stone-names { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .stone-preview { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--surface-1); outline: 1px solid var(--line); outline-offset: -1px; overflow: hidden; }
  .stone-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); }
  .stone-preview img.is-on { opacity: 1; }
  .stone-row:hover .stone-en, .stone-row:focus-visible .stone-en { font-style: italic; color: var(--gold); }
}

/* ---------- 7.7 visit band ---------- */
.visit-band { display: grid; background: var(--surface-2); }
.visit-map { height: 360px; position: relative; background: var(--surface-1); }
.map-frame { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) sepia(.35) hue-rotate(-20deg) brightness(.85) contrast(1.05); transition: filter .5s; }
.visit-map:hover .map-frame, .visit-map:focus-within .map-frame, .map-box:hover .map-frame, .map-box:focus-within .map-frame { filter: none; }
.visit-info { order: -1; padding: clamp(2rem, 5vw, 4.5rem) 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.visit-addr { color: var(--ivory); font-weight: 400; }
.visit-addr .ar-sm { display: block; margin-top: .3rem; }
.visit-info .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
.visit-info .btn-row .btn { width: 100%; }
@media (min-width: 1024px) {
  .visit-band { grid-template-columns: 1.4fr 1fr; min-height: 560px; }
  .visit-map { height: auto; min-height: 560px; }
  .visit-info { order: 0; padding-inline: clamp(2rem, 5vw, 4.5rem); justify-content: center; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .visit-info .btn-row { flex-direction: row; align-items: center; width: auto; }
  .visit-info .btn-row .btn { width: auto; }
}

/* ---------- 7.8 final ---------- */
.final { padding-block: clamp(6rem, 12vw, 11rem); text-align: center; }
.final-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.final .emblem { width: clamp(140px, 22vw, 240px); }
.final p { max-width: 44ch; }

/* ---------- page head (products, visit) ---------- */
.page-head { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)); padding-bottom: 3rem; }
.page-head-grid { display: grid; gap: 1.5rem; align-items: end; }
.page-head .ar { font-size: 2rem; margin-top: .5rem; }
@media (min-width: 768px) { .page-head-grid { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); } }

/* ---------- products: filter bar ---------- */
.filter-bar { position: sticky; top: var(--header-h); z-index: 20; background: rgba(23, 10, 13, .92); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line-soft); }
@supports not (backdrop-filter: blur(1px)) { .filter-bar { background: var(--bg); } }
@supports (backdrop-filter: blur(1px)) { .filter-bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.filter-row {
  display: flex; gap: .75rem; padding: .85rem 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-btn {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: baseline; gap: .6rem; min-height: 44px; padding: .8rem 1.2rem;
  background: transparent; border: 1px solid var(--line); color: var(--ivory-2); white-space: nowrap;
  transition: border-color .3s, background-color .3s, color .3s;
}
.filter-btn .f-en { font-weight: 500; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.filter-btn .f-ar { font-family: var(--f-ar); font-size: .8125rem; color: var(--ivory-3); }
.filter-btn:hover { border-color: var(--gold); }
.filter-btn[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon-hi); color: var(--ivory); }
.filter-btn[aria-pressed="true"] .f-ar { color: var(--ivory); }
@media (min-width: 1024px) {
  .filter-row { padding-inline: max(16px, calc((100vw - 1320px) / 2)); -webkit-mask-image: none; mask-image: none; }
}

/* ---------- products: sections + cards ---------- */
.catalogue { padding-block: clamp(3rem, 6vw, 5rem) var(--section-pad); }
.cat-section { margin-bottom: clamp(4rem, 8vw, 7rem); scroll-margin-top: 150px; }
.cat-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.25rem; }
.cat-head .ar { font-size: 1.75rem; }
.cat-intro { margin-top: .75rem; color: var(--ivory-3); margin-bottom: 2.25rem; }
.product-grid { display: grid; gap: 3.5rem clamp(1.25rem, 2.5vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-card:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .product-card:first-child .pc-media { flex: 1; aspect-ratio: auto; min-height: 420px; }
  .product-card:first-child .pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .product-card.drop { translate: 0 3rem; }
}
.product-card { display: flex; flex-direction: column; min-width: 0; }
.pc-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--surface-1); overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
@media (hover: hover) { .pc-media:hover img { transform: scale(1.04); } }
.pc-body { padding-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.pc-ref { font-weight: 400; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-3); }
.pc-name { font-size: 1.375rem; }
.pc-ar { font-family: var(--f-ar); font-weight: 400; color: var(--gold); font-size: 1rem; }
.pc-desc { font-size: .95rem; color: var(--ivory-2); margin-top: .25rem; }
.pc-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .35rem;
  font-weight: 500; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 85%;
  transition: background-size .45s var(--ease-out), color .3s;
}
.pc-cta:hover { background-size: 100% 1px; }
.pc-cta i { font-size: 1.1rem; }
.noscript-note { padding: 2rem 0; }
.noscript-note .btn-row { margin-top: 1rem; }

/* ---------- quick view dialog ---------- */
.qv {
  padding: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--ivory-2);
  width: 100%; max-width: 100%; height: 100%; max-height: 100dvh; margin: 0; overflow: auto; box-shadow: var(--shadow);
}
.qv::backdrop { background: rgba(23, 10, 13, .8); }
.qv[open] { animation: qv-in .35s var(--ease-out); }
@keyframes qv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.qv-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--ivory); font-size: 1.4rem; }
.qv-close:hover { border-color: var(--gold); }
.qv-grid { display: grid; }
.qv-media { position: relative; background: var(--surface-1); }
.qv-media img { width: 100%; max-height: 55svh; aspect-ratio: 4 / 5; object-fit: cover; }
.qv-body { padding: 1.75rem 16px 2rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.qv-cat { font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.qv-name { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.qv-body .btn-row { margin-top: 1rem; flex-direction: column; align-items: stretch; width: 100%; }
@media (min-width: 768px) {
  .qv { width: min(100% - 32px, 1080px); height: auto; max-height: calc(100dvh - 32px); margin: auto; }
  .qv-grid { grid-template-columns: 1.1fr 1fr; }
  .qv-media img { max-height: none; height: 100%; aspect-ratio: 4 / 5; }
  .qv-body { padding: clamp(2rem, 4vw, 3.5rem); justify-content: center; }
  .qv-body .btn-row { flex-direction: row; align-items: center; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .qv[open] { animation: none; } }

/* ---------- wide band ---------- */
.wide-band { background: var(--surface-2); padding-block: clamp(4rem, 8vw, 7rem); }
.wide-grid { display: grid; gap: 1.75rem; align-items: center; }
.wide-grid .btn-row { margin-top: .5rem; }
@media (min-width: 768px) { .wide-grid { grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 6rem); } }

/* ---------- visit page ---------- */
.about-grid { display: grid; gap: 2.5rem; align-items: center; }
.about-text { display: grid; gap: 1.25rem; }
.about-arch { position: relative; width: min(78vw, 420px); aspect-ratio: 4 / 5.2; background: var(--surface-1); outline: 1px solid var(--line); outline-offset: -14px; justify-self: center; }
.about-arch .px { position: absolute; inset: -8% 0; }
.about-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); }
  .about-arch { width: 100%; max-width: 480px; justify-self: end; }
}
.contact-grid { display: grid; gap: 2.5rem; }
.contact-dl { margin: 0; }
.contact-dl div { border-top: 1px solid var(--line); padding: 1rem 0; display: grid; gap: .2rem; }
.contact-dl dt { font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-3); }
.contact-dl dd { margin: 0; color: var(--ivory); font-weight: 400; }
.contact-dl dd a { color: var(--gold); }
.contact-left .btn-row { margin-top: 1.5rem; }
.map-box { height: 380px; border: 1px solid var(--line); background: var(--surface-1); }
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .map-box { height: 560px; }
}
.credits { padding-block: 2rem var(--section-pad); }
.credits h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.credits p, .credits li { font-size: .875rem; color: var(--ivory-3); font-weight: 400; max-width: 80ch; }
.credits ul { margin-top: 1rem; display: grid; gap: .5rem; }
.credits a { color: var(--ivory-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.credits a:hover { color: var(--gold-hi); }

/* ---------- 404 ---------- */
.nf { min-height: 100dvh; padding: calc(var(--header-h) + 3rem) 0 4rem; display: grid; place-items: center; text-align: center; }
.nf-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.nf .emblem { width: clamp(140px, 22vw, 240px); }
.nf h1 { max-width: 16ch; }