/* ============================================================
   Hero banner
   ============================================================ */

.hero {
  --carousel-gap: 0px;
  background: var(--color-bg);
}
.hero .carousel__track {
  scrollbar-width: none;
}
.hero__slide {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  color: inherit;
  text-decoration: none;
}
.hero__media,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
}
/* Hero captions sit on a photo with a dark scrim behind them (.hero__overlay)
   regardless of the page's own light/dark theme, so their text stays a fixed
   light color rather than following --color-text. */
.hero__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-lg) var(--container-pad);
  text-align: center;
  color: #fff;
}
.hero__title {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-block-end: var(--space-2xs);
  color: #fff;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-gold);
  margin-block-end: var(--space-2xs);
}
.hero__text {
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
}
@media (min-width: 768px) {
  .hero__slide { aspect-ratio: 21 / 9; }
  .hero__title { font-size: var(--fs-3xl); }
}

/* ============================================================
   Intro grid — about-us box + main box
   ============================================================ */

.intro-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}
.intro-grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767px) {
  .intro-grid[data-cols="2"] { grid-template-columns: 1fr; }
}

.intro-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
}
.intro-card__media {
  position: absolute;
  inset: 0;
}
.intro-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.intro-card:hover .intro-card__media img {
  transform: scale(1.05);
}

/* The image is clean/undimmed until hover — the dark scrim (::before) and
   the caption (.intro-card__body) both only appear together on hover, so
   there's no separate always-on overlay needed. */
.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.intro-card:hover::before,
.intro-card:focus-within::before {
  opacity: 1;
}

/* Inset frame: 4 independent lines, each growing outward from its own
   center to full length (not a box scaling as one piece), overlapping by
   5px at each corner instead of mitering. */
.intro-card__frame {
  position: absolute;
  inset: 20px;
  z-index: 3;
  pointer-events: none;
}
.intro-card__frame-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.intro-card__frame-line--top,
.intro-card__frame-line--bottom {
  inset-inline: -5px;
  height: 1px;
  transform: scaleX(0);
}
.intro-card__frame-line--top {
  inset-block-start: 0;
}
.intro-card__frame-line--bottom {
  inset-block-end: 0;
}
.intro-card__frame-line--start,
.intro-card__frame-line--end {
  inset-block: -5px;
  width: 1px;
  transform: scaleY(0);
}
.intro-card__frame-line--start {
  inset-inline-start: 0;
}
.intro-card__frame-line--end {
  inset-inline-end: 0;
}
.intro-card:hover .intro-card__frame-line,
.intro-card:focus-within .intro-card__frame-line {
  transform: scale(1);
}

.intro-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}
.intro-card:hover .intro-card__body,
.intro-card:focus-within .intro-card__body {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.intro-card__body h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: #fff;
}
.intro-card__body p {
  margin-block: var(--space-2xs);
  color: rgba(255, 255, 255, 0.8);
}
.intro-card__body .link-arrow {
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.intro-card__body .link-arrow::after {
  display: none;
}
.intro-card__body .link-arrow:hover,
.intro-card__body .link-arrow:focus-visible {
  background: var(--color-gold-dim);
  color: var(--color-text-on-gold);
}

/* ============================================================
   Feature banner — collection box
   ============================================================ */

.feature-banner {
  position: relative;
}
.feature-banner__link {
  position: relative;
  display: block;
  overflow: hidden;
}
.feature-banner__media {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}
.feature-banner__link:hover .feature-banner__media {
  transform: scale(1.05);
}

/* Same hover treatment as .intro-card above: clean image until hover, then
   a dark scrim, an inset frame of 4 lines growing from center (overlapping
   5px at each corner), and the caption fading/sliding in together. */
.feature-banner__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.feature-banner__link:hover::before,
.feature-banner__link:focus-visible::before {
  opacity: 1;
}

.feature-banner__frame {
  position: absolute;
  inset: 20px;
  z-index: 3;
  pointer-events: none;
}
.feature-banner__frame-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.feature-banner__frame-line--top,
.feature-banner__frame-line--bottom {
  inset-inline: -5px;
  height: 1px;
  transform: scaleX(0);
}
.feature-banner__frame-line--top {
  inset-block-start: 0;
}
.feature-banner__frame-line--bottom {
  inset-block-end: 0;
}
.feature-banner__frame-line--start,
.feature-banner__frame-line--end {
  inset-block: -5px;
  width: 1px;
  transform: scaleY(0);
}
.feature-banner__frame-line--start {
  inset-inline-start: 0;
}
.feature-banner__frame-line--end {
  inset-inline-end: 0;
}
.feature-banner__link:hover .feature-banner__frame-line,
.feature-banner__link:focus-visible .feature-banner__frame-line {
  transform: scale(1);
}

.feature-banner__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}
.feature-banner__link:hover .feature-banner__body,
.feature-banner__link:focus-visible .feature-banner__body {
  opacity: 1;
  transform: translateY(0);
}
.feature-banner__title {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  max-width: 60ch;
  color: #fff;
}

/* ============================================================
   Category grid
   ============================================================ */

.category-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  /* If the last card lands on an odd position, the count is odd — it would
     otherwise sit alone with an empty gap beside it, so span both columns
     instead. (:last-child:nth-child(odd) is only true when both match the
     same element, i.e. exactly when the total count is odd.) */
  .category-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.category-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
}
.category-card__media {
  position: absolute;
  inset: 0;
  display: block;
}
.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.category-card:hover .category-card__media img {
  transform: scale(1.05);
}

/* Same hover treatment as .intro-card/.feature-banner above: clean image
   until hover, then a dark scrim, an inset frame of 4 lines growing from
   center (overlapping 5px at each corner), and the caption fading in. */
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.category-card:hover::before,
.category-card:focus-within::before {
  opacity: 1;
}

.category-card__frame {
  position: absolute;
  inset: 20px;
  z-index: 3;
  pointer-events: none;
}
.category-card__frame-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.category-card__frame-line--top,
.category-card__frame-line--bottom {
  inset-inline: -5px;
  height: 1px;
  transform: scaleX(0);
}
.category-card__frame-line--top {
  inset-block-start: 0;
}
.category-card__frame-line--bottom {
  inset-block-end: 0;
}
.category-card__frame-line--start,
.category-card__frame-line--end {
  inset-block: -5px;
  width: 1px;
  transform: scaleY(0);
}
.category-card__frame-line--start {
  inset-inline-start: 0;
}
.category-card__frame-line--end {
  inset-inline-end: 0;
}
.category-card:hover .category-card__frame-line,
.category-card:focus-within .category-card__frame-line {
  transform: scale(1);
}

.category-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}
.category-card:hover .category-card__body,
.category-card:focus-within .category-card__body {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.category-card__body h3 {
  font-family: var(--font-body);
  color: #fff;
  text-transform: uppercase;
}
.category-card__body p {
  color: rgba(255, 255, 255, 0.8);
  margin-block: var(--space-2xs);
}
.category-card__body .link-arrow {
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.category-card__body .link-arrow::after {
  display: none;
}
.category-card__body .link-arrow:hover,
.category-card__body .link-arrow:focus-visible {
  background: var(--color-gold-dim);
  color: var(--color-text-on-gold);
}

/* ============================================================
   Custom order — work-sample banner + carousel
   ============================================================ */

/* Uses the plain .container (same as .category-grid directly above it) so
   it lines up with those two columns, but stays a single stacked column
   itself. */
.custom-order__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
.custom-order__banner {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.custom-order__banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}
.custom-order__banner:hover img {
  transform: scale(1.05);
}

/* Same hover treatment as .intro-card/.feature-banner/.category-card above:
   clean image until hover, then a dark scrim, an inset frame of 4 lines
   growing from center (overlapping 5px at each corner), and the caption
   fading in. .custom-order__banner is itself the link (like .feature-banner__link),
   so the trigger is :hover/:focus-visible directly, not :focus-within. */
.custom-order__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.custom-order__banner:hover::before,
.custom-order__banner:focus-visible::before {
  opacity: 1;
}

.custom-order__frame {
  position: absolute;
  inset: 20px;
  z-index: 3;
  pointer-events: none;
}
.custom-order__frame-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.custom-order__frame-line--top,
.custom-order__frame-line--bottom {
  inset-inline: -5px;
  height: 1px;
  transform: scaleX(0);
}
.custom-order__frame-line--top {
  inset-block-start: 0;
}
.custom-order__frame-line--bottom {
  inset-block-end: 0;
}
.custom-order__frame-line--start,
.custom-order__frame-line--end {
  inset-block: -5px;
  width: 1px;
  transform: scaleY(0);
}
.custom-order__frame-line--start {
  inset-inline-start: 0;
}
.custom-order__frame-line--end {
  inset-inline-end: 0;
}
.custom-order__banner:hover .custom-order__frame-line,
.custom-order__banner:focus-visible .custom-order__frame-line {
  transform: scale(1);
}

.custom-order__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}
.custom-order__banner:hover .custom-order__body,
.custom-order__banner:focus-visible .custom-order__body {
  opacity: 1;
  transform: translateY(0);
}
.custom-order__body h2 {
  font-family: var(--font-body);
  color: #fff;
}
.custom-order__body p {
  color: rgba(255, 255, 255, 0.85);
}
.custom-order__carousel-wrap h3 {
  text-align: center;
  margin-block-end: var(--space-sm);
}

/* "Media card" used by work-sample carousel items */
.media-card {
  text-align: center;
}
.media-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-2xs);
}
.media-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.media-card:hover .media-card__media img {
  transform: scale(1.06);
}
.media-card__title {
  font-size: var(--fs-md);
}

/* Tag carousel items — its own classes (not .media-card) since it uses a
   390x310 crop rather than work-sample's fixed square. */
.tag-card {
  text-align: center;
}
.tag-card__media {
  position: relative;
  display: block;
  aspect-ratio: 390 / 310;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-2xs);
}
.tag-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.tag-card__media:hover img {
  transform: scale(1.06);
}
.tag-card__title {
  font-size: var(--fs-md);
}
.tag-card__title-en {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ============================================================
   Media row list — alternating image/text rows, shared by the
   "Collections" section (_Collection.cshtml) and the "Your favorite
   jewelry" tag section below. Sides swap every other item via
   flex-direction: row-reverse (works the same regardless of page
   direction, since it flips relative to each item's own normal order).
   Images keep their own natural height (no forced aspect-ratio), which is
   what gives the list its staggered, non-gridded rhythm.
   ============================================================ */

.media-row-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.media-row-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.media-row-list__item:not(:last-child) {
  border-block-end: 1px solid var(--color-border);
}
.media-row-list__item[data-reveal].is-reveal-ready {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.media-row-list__item[data-reveal].is-reveal-ready:nth-child(odd) {
  transform: translateX(-60px);
}
.media-row-list__item[data-reveal].is-reveal-ready:nth-child(even) {
  transform: translateX(60px);
}
.media-row-list__item[data-reveal].is-revealed {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .media-row-list__item[data-reveal] {
    transition: none;
  }
}
@media (min-width: 768px) {
  .media-row-list__item {
    flex-direction: row;
    gap: var(--space-xl);
  }
  .media-row-list__item:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.media-row-list__media {
  display: block;
  flex: 0 1 400px;
  min-width: 0;
  max-width: 400px;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.media-row-list__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}
.media-row-list__media:hover img {
  transform: scale(1.03);
}
.media-row-list__body {
  flex: 1 1 50%;
  text-align: center;
  padding-inline: var(--space-sm);
}
.media-row-list__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  margin-block-end: var(--space-2xs);
}
.media-row-list__title-en {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--fs-md);
}
.media-row-list__summary {
  color: var(--color-text-muted);
  margin-block-end: var(--space-sm);
}

/* ============================================================
   Tag section
   ============================================================ */

.tag-section {
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-raised);
}