/* ============================================================
   CULTURAL EXPERIENCES — sections/cultural-exp.css
   Immersive experience cards (lantern making, pottery, etc.)
   ============================================================ */

.cultural-exp {
  background: var(--clr-cream);
  padding-block: var(--section-py);
  position: relative;
  overflow: hidden;
}

/* Decorative wave border top */
.cultural-exp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background:
    radial-gradient(ellipse 80px 52px at 0% 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 160px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 320px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 480px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 640px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 800px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 960px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 1120px 0%, var(--clr-white) 49%, transparent 50%),
    radial-gradient(ellipse 80px 52px at 1280px 0%, var(--clr-white) 49%, transparent 50%);
  pointer-events: none;
}

/* ---- Header ---- */
.cultural-exp__header {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.cultural-exp__subtitle {
  max-width: 540px;
  margin: var(--sp-4) auto 0;
  color: var(--clr-gray-500);
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
}

/* ---- Cards grid ---- */
.cultural-exp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* =======================
   EXPERIENCE CARD
   ======================= */
.exp-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  height: 380px;
  box-shadow: var(--shadow-lg);
  transition: var(--t-base);
}
.exp-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

/* Background image */
.exp-card__image {
  position: absolute;
  inset: 0;
}
.exp-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}
.exp-card:hover .exp-card__image img {
  transform: scale(1.1);
}

/* Overlay gradient */
.exp-card__overlay {
  position: absolute;
  inset: 0;
  transition: background 0.4s ease;
}
/* Default dark-to-transparent gradient */
.exp-card__overlay {
  background: linear-gradient(
    to top,
    rgba(10,10,20,.90) 0%,
    rgba(10,10,20,.45) 50%,
    rgba(10,10,20,.15) 100%
  );
}
.exp-card:hover .exp-card__overlay {
  background: linear-gradient(
    to top,
    rgba(10,10,20,.96) 0%,
    rgba(10,10,20,.65) 50%,
    rgba(10,10,20,.22) 100%
  );
}

/* Content */
.exp-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 26px;
}

/* Emoji icon */
.exp-card__icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
  display: block;
  transform: scale(1);
  transition: transform 0.3s var(--t-spring);
}
.exp-card:hover .exp-card__icon {
  transform: scale(1.2);
}

/* Category label */
.exp-card__cat {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-hoian-yellow);
  margin-bottom: var(--sp-2);
}

/* Title (Vietnamese + English) */
.exp-card__vi {
  font-family: var(--ff-script);
  font-size: var(--fs-20);
  color: rgba(255,255,255,.75);
  line-height: 1;
  display: block;
  margin-bottom: 3px;
}
.exp-card__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

/* Description — hidden until hover */
.exp-card__desc {
  font-size: var(--fs-13);
  color: rgba(255,255,255,.72);
  line-height: var(--lh-relaxed);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
  opacity: 0;
  margin-bottom: 0;
}
.exp-card:hover .exp-card__desc {
  max-height: 80px;
  opacity: 1;
  margin-bottom: var(--sp-4);
}

/* Discover link */
.exp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--clr-hoian-yellow);
  border-bottom: 1.5px solid rgba(245,197,24,.4);
  padding-bottom: 1px;
  width: max-content;
  transition: var(--t-fast);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease 0.05s, opacity 0.35s ease 0.05s, gap 0.2s ease, color 0.2s ease;
}
.exp-card:hover .exp-card__link {
  max-height: 32px;
  opacity: 1;
}
.exp-card__link:hover {
  color: var(--clr-white);
  gap: 10px;
}

/* ---- Cultural note at bottom ---- */
.cultural-exp__note {
  margin-top: var(--sp-12);
  text-align: center;
  position: relative;
}
.cultural-exp__note::before,
.cultural-exp__note::after {
  content: '🏮';
  font-size: 1.2rem;
  margin: 0 var(--sp-4);
  vertical-align: middle;
}
.cultural-exp__note p {
  display: inline;
  font-family: var(--ff-script);
  font-size: var(--fs-20);
  color: var(--clr-hoian-amber);
}