/* =====================================================================
   KOHWAN — Kashmir Heritage & Culture.
   Hero, five theme cards (text / large photo / three thumbs) and a places
   rail, in the site's navy, gold and warm white.
   Markup: views/frontend/heritage.blade.php
   ===================================================================== */
.hc {
  --h-navy: #2e4755;
  --h-ink: #1f3441;
  --h-muted: #5f7380;
  --h-gold: #BD830D;
  --h-line: #E6EBEE;
  --h-card: #FFFFFF;
  --h-tint: rgba(46, 71, 85, .06);
  --h-ease: cubic-bezier(.22, .61, .36, 1);
  padding-bottom: clamp(48px, 6vw, 90px);
  color: var(--h-ink);
}
:root[data-theme="dark"] .hc {
  --h-navy: #E3BC63;
  --h-ink: #EEF2F4;
  --h-muted: #A9B8C1;
  --h-line: rgba(255, 255, 255, .1);
  --h-card: rgba(255, 255, 255, .04);
  --h-tint: rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------- buttons */
.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--h-ease), color .2s var(--h-ease), border-color .2s var(--h-ease);
}
.hc-btn svg { width: 16px; height: 16px; transition: transform .25s var(--h-ease); }
.hc-btn:hover svg { transform: translateX(3px); }
.hc-btn:focus-visible { outline: 2px solid var(--h-gold); outline-offset: 2px; }
.hc-btn--solid { background: #2e4755; color: #FFFFFF; }
.hc-btn--solid:hover { background: #1f3441; }
.hc-btn--ghost { background: rgba(255, 255, 255, .9); border-color: rgba(46, 71, 85, .2); color: #2e4755; }
.hc-btn--ghost:hover { background: #FFFFFF; border-color: #2e4755; }
.hc-btn--line { background: transparent; border-color: var(--h-line); color: var(--h-navy); }
.hc-btn--line:hover { border-color: var(--h-navy); }
.hc-card.is-open .hc-btn--line svg { transform: rotate(90deg); }

/* ------------------------------------------------------------------ hero */
.hc-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 30vw, 420px);
  display: grid;
  align-items: center;
}
.hc-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Light wash on the left, where the words sit, clearing to the photograph. */
.hc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250, 248, 243, .96) 0%, rgba(250, 248, 243, .82) 34%, rgba(250, 248, 243, 0) 68%);
}
.hc-hero__in { position: relative; z-index: 2; padding-block: clamp(34px, 4vw, 60px); }
.hc-hero__crumb { margin: 0 0 12px; font-size: .78rem; color: #5f7380; }
.hc-hero__crumb a { color: #5f7380; text-decoration: none; }
.hc-hero__crumb a:hover { color: #2e4755; text-decoration: underline; }
.hc-hero__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #2e4755;
}
.hc-hero__sub { margin: 14px 0 0; max-width: 40ch; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.6; color: #1f3441; }
.hc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------------------------------------------------------------- themes */
.hc-themes { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); padding-top: clamp(26px, 3vw, 44px); }

.hc-card {
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--h-line);
  border-radius: 16px;
  background: var(--h-card);
  box-shadow: 0 6px 24px rgba(31, 52, 65, .05);
  scroll-margin-top: 96px;
}
.hc-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
.hc-card__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(6px, 1vw, 14px); }
.hc-card__eyebrow {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h-muted);
}
.hc-card__eyebrow span { margin-right: 10px; color: var(--h-gold); }
.hc-card__title {
  margin: 0 0 12px;
  max-width: 18ch;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--h-navy);
}
.hc-card__text { margin: 0 0 20px; max-width: 44ch; font-size: .92rem; line-height: 1.65; color: var(--h-muted); }

.hc-card__main { position: relative; overflow: hidden; border-radius: 12px; min-height: 230px; aspect-ratio: 16 / 9; background: var(--h-tint); }
.hc-card__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--h-ease); }
.hc-card:hover .hc-card__main img { transform: scale(1.03); }

/* The panel the Explore button opens: one line of photo cards. */
.hc-list { margin-top: clamp(14px, 1.6vw, 22px); padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--h-line); }
.hc-list[hidden] { display: none; }
.hc-slider {
  --gap: 14px;
  list-style: none;
  margin: 0;
  padding: 3px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hc-slider::-webkit-scrollbar { display: none; }

.hc-item {
  flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: 12px;
  background: var(--h-card);
  scroll-snap-align: start;
  scroll-margin-top: 120px;
  transition: box-shadow .3s var(--h-ease), transform .3s var(--h-ease);
}
.hc-item:hover { box-shadow: 0 8px 22px rgba(31, 52, 65, .1); transform: translateY(-2px); }
.hc-item.is-target { box-shadow: 0 0 0 2px var(--h-gold); }
.hc-item__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--h-tint); }
.hc-item__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--h-ease); }
.hc-item:hover .hc-item__img img { transform: scale(1.05); }
.hc-item__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.hc-item b { display: block; font-size: .96rem; color: var(--h-navy); }
.hc-item small { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .74rem; font-weight: 600; color: var(--h-gold); }
.hc-item small svg { width: 12px; height: 12px; }
.hc-item p { margin: 6px 0 12px; font-size: .84rem; line-height: 1.55; color: var(--h-muted); }

/* Add to my trip, pinned to the foot of the card. */
.hc-item__trip { margin-top: auto; }
.hc-add,
.hc-added {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}
.hc-add[hidden], .hc-added[hidden] { display: none; }
.hc-add { border: 1px solid var(--h-navy); color: var(--h-navy); text-decoration: none; transition: background-color .2s var(--h-ease), color .2s var(--h-ease); }
.hc-add:hover { background: #2e4755; border-color: #2e4755; color: #FFFFFF; }
.hc-add:focus-visible { outline: 2px solid var(--h-gold); outline-offset: 2px; }
.hc-add svg, .hc-added svg { width: 14px; height: 14px; }
.hc-added { background: rgba(189, 131, 13, .12); color: var(--h-gold); }
.hc-added button {
  display: grid;
  place-items: center;
  margin-left: 2px;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hc-added button:hover { background: rgba(189, 131, 13, .18); }
.hc-added button svg { width: 12px; height: 12px; }
.hc-item__trip.is-added .hc-added { animation: hc-pop .5s var(--h-ease); }
@keyframes hc-pop { 40% { transform: scale(1.08); } }

/* ---------------------------------------------------------------- places */
.hc-places { padding-top: clamp(36px, 4vw, 60px); }
.hc-places__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hc-places__head h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--h-navy);
}
.hc-places__head h2::after { content: ""; width: 44px; height: 2px; background: var(--h-gold); }
.hc-places__head p { margin: 4px 0 0; font-size: .82rem; color: var(--h-muted); }
.hc-places__all { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--h-navy); text-decoration: none; white-space: nowrap; }
.hc-places__all svg { width: 14px; height: 14px; }
.hc-places__all:hover { text-decoration: underline; }

.hc-rail {
  --gap: clamp(10px, 1.2vw, 16px);
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
}
.hc-rail::-webkit-scrollbar { display: none; }
.hc-place {
  position: relative;
  flex: 0 0 calc((100% - 5 * var(--gap)) / 6);
  aspect-ratio: 4 / 3.3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--h-tint);
  scroll-snap-align: start;
  color: #FFFFFF;
  text-decoration: none;
}
.hc-place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--h-ease); }
.hc-place:hover img { transform: scale(1.05); }
.hc-place__veil { position: absolute; inset: 40% 0 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.hc-place b { position: absolute; left: 12px; right: 12px; bottom: 28px; font-size: .95rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.hc-place small { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; opacity: .9; }
.hc-place small svg { width: 11px; height: 11px; }
.hc-place:focus-visible { outline: 2px solid var(--h-gold); outline-offset: 3px; }

.hc-rail__nav { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.hc-rail__nav button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--h-line);
  border-radius: 50%;
  background: var(--h-card);
  color: var(--h-navy);
  cursor: pointer;
}
.hc-rail__nav button:hover { border-color: var(--h-navy); }
.hc-rail__nav svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1150px) {
  .hc-place { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
  .hc-item { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}
@media (max-width: 900px) {
  .hc-card__grid { grid-template-columns: minmax(0, 1fr); }
  .hc-card__main { min-height: 0; }
  .hc-place { flex-basis: calc((100% - 2 * var(--gap)) / 2.6); }
  .hc-item { flex-basis: calc((100% - var(--gap)) / 2.2); }
  .hc-hero::after { background: linear-gradient(180deg, rgba(250, 248, 243, .9), rgba(250, 248, 243, .7)); }
}
@media (max-width: 560px) {
  .hc-place { flex-basis: 62%; }
  .hc-item { flex-basis: 78%; }
  .hc-places__head { flex-direction: column; align-items: flex-start; }
}