/* ==========================================================================
   Inner pages — shared page-hero banner + content layout patterns
   Used by every page other than index.html. Loaded alongside home.css,
   which already holds many reusable pieces (section-head, badge, tour-card,
   process-step, story-card, highlights stats, final-cta, etc).
   ========================================================================== */

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(251, 247, 239, 0.65);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: rgba(251, 247, 239, 0.85); }
.breadcrumb a:hover { color: var(--color-ivory-0); }
.breadcrumb svg { width: 13px; height: 13px; opacity: 0.6; }

/* ---- Page hero: full-bleed photo banner used at the top of every inner page ---- */
.page-hero {
  position: relative;
  background: var(--color-forest-900);
  color: var(--color-ivory-0);
  overflow: hidden;
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(20,43,29,0.94) 0%, rgba(20,43,29,0.86) 42%, rgba(20,43,29,0.5) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__body { max-width: 640px; }
.page-hero h1 {
  font-size: var(--text-2xl);
  color: var(--color-ivory-0);
}
.page-hero__body > * {
  animation: page-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-hero__body .eyebrow { animation-delay: 0.05s; }
.page-hero__body h1 { animation-delay: 0.15s; }
.page-hero__lede { animation-delay: 0.26s; }
.page-hero__actions { animation-delay: 0.38s; }
@keyframes page-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__body > * { animation: none; }
}

.page-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  color: rgba(251, 247, 239, 0.82);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.page-hero--compact { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.page-hero--compact h1 { font-size: var(--text-xl); }

/* ---- Two-column content + sidebar (used on Contact) ---- */
.content-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
}

/* ---- Simple icon-feature list (used across service pages) ---- */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.feature-list__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature-list__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-forest-100);
  color: var(--color-forest-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-list__icon svg { width: 22px; height: 22px; }
.feature-list__item h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.feature-list__item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; }
}

/* ---- Split section: media one side, copy the other (reused with alternating order) ---- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.split-section__media .media-photo,
.split-section__media .media-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split-section--reverse .split-section__media { order: 2; }
@media (max-width: 860px) {
  .split-section { grid-template-columns: 1fr; }
  .split-section--reverse .split-section__media { order: -1; }
}

/* ---- Destination / place chip grid with photos (Sri Lanka Tours page) ---- */
.place-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.place-card {
  background: var(--color-ivory-0);
  border: 1px solid var(--color-sand-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.place-card .media-photo,
.place-card .media-placeholder { aspect-ratio: 4 / 3; }
.place-card__body { padding: var(--space-5); }
.place-card__body h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.place-card__body p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.place-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sand-600);
  margin-bottom: var(--space-2);
}
.place-card__highlights {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.place-card__highlights li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-charcoal-600);
  align-items: flex-start;
}
.place-card__highlights svg {
  width: 12px; height: 12px;
  color: var(--color-sand-500);
  margin-top: 3px;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .place-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .place-grid { grid-template-columns: 1fr; }
}

/* ---- Simple stat row (lighter than the dark .highlights band, for use mid-page) ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  background: var(--color-forest-100);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.stat-row .stat-block__num { color: var(--color-forest-700); }
.stat-row .stat-block__label { color: var(--color-charcoal-600); }
@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- Value/quote banner (About page) ---- */
.value-banner {
  background: var(--color-forest-900);
  color: var(--color-ivory-0);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
}
.value-banner svg { width: 40px; height: 40px; color: var(--color-sand-300); flex-shrink: 0; }
.value-banner p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ivory-0);
}
@media (max-width: 640px) {
  .value-banner { grid-template-columns: 1fr; text-align: left; }
}

/* ---- Simple FAQ / accordion (used on service pages) ---- */
.accordion-item {
  border-bottom: 1px solid var(--color-sand-line);
}
.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-forest-900);
}
.accordion-item__trigger svg {
  width: 20px; height: 20px;
  color: var(--color-sand-600);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.accordion-item[data-open="true"] .accordion-item__trigger svg { transform: rotate(45deg); }
.accordion-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-standard);
}
.accordion-item__panel p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  padding-bottom: var(--space-5);
  max-width: 65ch;
}

/* ---- Destination strip, light-background variant (used outside the dark .highlights band) ---- */
.destination-strip--light li {
  border-color: var(--color-sand-line);
  color: var(--color-charcoal-900);
}
.destination-strip--light li:hover {
  background: var(--color-forest-100);
  border-color: var(--color-forest-300);
}
/* ---- Package card (Packages page) ---- */
.package-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.package-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--color-ivory-0);
  border: 1px solid var(--color-sand-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.package-card:nth-child(even) { grid-template-columns: 1.1fr 0.9fr; }
.package-card:nth-child(even) .package-card__media { order: 2; }
.package-card__media .media-photo,
.package-card__media .media-placeholder { height: 100%; min-height: 280px; }
.package-card__body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
}
.package-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.package-card__body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.package-card__body > p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}
.package-card__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.package-card__route span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-forest-700);
  background: var(--color-forest-100);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
}
.package-card__route svg {
  width: 13px; height: 13px;
  color: var(--color-sand-500);
  flex-shrink: 0;
}
.package-card__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
}
.package-card__highlights li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-charcoal-900);
  align-items: flex-start;
}
.package-card__highlights svg {
  width: 15px; height: 15px;
  color: var(--color-sand-500);
  margin-top: 4px;
  flex-shrink: 0;
}
.package-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-sand-line);
}
.package-card__price {
  font-size: var(--text-xs);
  color: var(--color-charcoal-600);
}
.package-card__price strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-forest-900);
  font-weight: 600;
}
@media (max-width: 860px) {
  .package-card,
  .package-card:nth-child(even) { grid-template-columns: 1fr; }
  .package-card:nth-child(even) .package-card__media { order: -1; }
  .package-card__media .media-photo,
  .package-card__media .media-placeholder { aspect-ratio: 16/9; min-height: 0; }
  .package-card__highlights { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .package-card__foot { flex-direction: column; align-items: stretch; }
  .package-card__foot .btn { width: 100%; }
}

.contact-card {
  background: var(--color-ivory-0);
  border: 1px solid var(--color-sand-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: var(--text-base); margin-bottom: var(--space-5); }
.contact-card ul { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-card li { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact-card svg { width: 19px; height: 19px; color: var(--color-forest-500); flex-shrink: 0; margin-top: 2px; }
.contact-card li strong { display: block; font-size: var(--text-sm); }
.contact-card li span, .contact-card li a { font-size: var(--text-sm); color: var(--color-charcoal-600); }

.map-placeholder {
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  background: var(--color-forest-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-forest-700);
  text-align: center;
  padding: var(--space-6);
  border: 1px dashed var(--color-forest-300);
}
.map-placeholder svg { width: 34px; height: 34px; }
.map-placeholder p { font-size: var(--text-xs); color: var(--color-charcoal-600); max-width: 32ch; }