/* tea.travel — site-specific styles on top of tokens.css
   (tokens.css already имеет все base classes + utility helpers) */

/* SVG icon defaults */
.lucide {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -3px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Layout — section padding scale */
.sect { padding: 72px 64px 56px; }
.sect-bordered { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg-raised); }
.sect-bordered-bottom { border-bottom: 1px solid var(--hairline); }

/* Grid helpers */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-aside { grid-template-columns: 1fr 280px; gap: 64px; align-items: end; }
.grid-editorial { grid-template-columns: 440px 1fr; gap: 56px; align-items: start; }
.grid-footer { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; }

/* Flex utilities */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: baseline; }
.flex-center { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: 8px; } .gap-md { gap: 12px; } .gap-lg { gap: 24px; }

/* Display-class type for hero */
.display-d0 { font-size: var(--t-d0); }   /* 88 */
.display-d1 { font-size: var(--t-d1); }   /* 64 */
.display-d2 { font-size: var(--t-d2); }   /* 48 */
.display-d3 { font-size: var(--t-d3); }   /* 36 */

/* Chip — interactive variant */
.chip-active {
  color: var(--fg-1);
  border-color: var(--fg-1);
}

/* Section head pattern */
.sect-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
}

/* Harvest pill */
.harvest-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--hairline);
}
.harvest-pill.now {
  background: var(--bg);
  border-color: var(--hairline-strong);
}
.harvest-pill.later { opacity: 0.55; }
.harvest-pill .month {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
}
.harvest-pill .now-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Card — RegionCard */
.region-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0;
  overflow: hidden;
  min-height: 220px;
  text-align: left;
}
.region-card-body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
}
.region-card-name {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}
.region-card-img {
  border-radius: 0;
  border-left: 1px solid var(--hairline);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  min-height: 220px;
}
.region-card-meta {
  margin-top: auto;
  display: flex;
  gap: 24px;
  align-items: center;
}
.divider-v {
  width: 1px;
  height: 28px;
  background: var(--hairline);
}

/* Card — TourCard */
.tour-card {
  padding: 20px 22px;
  display: grid;
  gap: 14px;
  min-height: 200px;
  text-align: left;
}
.guide-circle {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--fg-2);
}
.tour-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* Card — GuideProfile */
.guide-card {
  padding: 22px 22px 20px;
  display: grid;
  gap: 16px;
  min-height: 200px;
  text-align: left;
}
.guide-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.guide-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-1);
  text-wrap: pretty;
  border-left: 1px solid var(--hairline-strong);
  padding-left: 14px;
}

/* Image placeholder hero variant */
.imgph-hero {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
}

/* Specs — horizontal variant */
.specs-h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.specs-h-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Subscribe input */
.subscribe-row {
  display: flex;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 6px;
}
.subscribe-row input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--fg-1);
  font-family: var(--font-mono);
  outline: none;
  padding: 0;
  font-size: var(--t-foot);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sect { padding: 32px 18px 24px; }
  .grid-aside,
  .grid-editorial,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-footer { grid-template-columns: 1fr; gap: 16px; }
  .region-card { grid-template-columns: 1fr; }
  .region-card-img { border-left: 0; border-bottom: 1px solid var(--hairline); min-height: 200px; }
  .display-d0 { font-size: 44px; line-height: 1; }
  .display-d1 { font-size: 36px; }
  .display-d2 { font-size: 28px; }
  .display-d3 { font-size: 22px; }
  .nav { padding: 14px 18px; }
  .nav-links { display: none; }
  .const-bar { padding: 0 18px; }
  .specs-h { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile-specific overrides */
@media (max-width: 600px) {
  .hide-mobile { display: none; }
  .btn-mobile-full { width: 100%; justify-content: center; }
  .sect-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}