/* ==========================================================================
   Tikros kelionės su Aušra – design system
   Tokens mirror the Figma variable collection "Tikros Kelionės"
   (file nMvfr03U5MagdV4IL2i9pC, page "present")
   ========================================================================== */

:root {
  /* brand */
  --brand-orange: #ed7c17;
  --brand-orange-dark: #d76c0c;
  --brand-teal: #0a6382;
  --brand-teal-dark: #084f68;

  /* text */
  --text-body: #262626;
  --text-muted: #515151;
  --text-nav: #121212;
  --text-on-dark: #ffffff;

  /* surfaces */
  --surface-white: #ffffff;
  --surface-page: #f3f3f3;

  /* fields */
  --field-fill: #fff8f2;
  --field-border: #e5ddd7;

  /* elevation */
  --shadow-card: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

  /* layout */
  --container: 1280px;
  --gutter: 20px;
  --radius-card: 15px;
  --radius-box: 12px;
  --radius-input: 8px;
  --section-pad: 39px;
}

/* --------------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ typography */

.h1,
h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  color: var(--brand-teal);
}

.h2,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--brand-teal);
}

.h3,
h3 {
  font-family: inherit;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-body);
}

.lead { font-size: 18px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.5; }
.caption { font-size: 13px; line-height: 1.5; }
.muted { color: var(--text-muted); }
.price { font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--brand-orange); }

/* --------------------------------------------------------------- layout */

.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); }
.section--page { background: var(--surface-page); }
.section--tint { background: var(--field-fill); }

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section__link {
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-teal);
  white-space: nowrap;
}
.section__link:hover { color: var(--brand-orange); }

.stack-32 { display: flex; flex-direction: column; gap: 32px; }
/* The section header carries its own 32px for block containers. Inside
   .stack-32 the flex gap already provides that, and both applying put the
   heading twice as far from its cards as in a plainly wrapped section — which
   is why "Populiarios poilsinės kelionės" sat lower than "Tinklaraštis". */
.stack-32 > .section__header { margin-bottom: 0; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-input);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary { background: var(--brand-orange); color: var(--text-on-dark); }
.btn--primary:hover { background: var(--brand-orange-dark); }

.btn--secondary { background: var(--brand-teal); color: var(--text-on-dark); }
.btn--secondary:hover { background: var(--brand-teal-dark); }

.btn--outline {
  background: var(--surface-white);
  color: var(--brand-teal);
  border: 1.5px solid var(--brand-teal);
}
.btn--outline:hover { background: var(--brand-teal); color: var(--text-on-dark); }

.btn--block { width: 100%; }
.btn .icon { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------- fields */

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 13px 17px;
  background: var(--field-fill);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-input);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
}

.input, .select { height: 50px; }
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 9.5h10L12 14.5 7 9.5Z' fill='%23121212'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin: 1.5px 0 0;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  cursor: pointer;
}
.checkbox input:checked {
  background: var(--brand-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m2.5 7.2 2.8 2.8 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--brand-orange);
}

/* -------------------------------------------------------------- top bar */

.topbar {
  background: var(--brand-teal);
  color: var(--text-on-dark);
  font-size: 13px;
  line-height: 1.5;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
}
.topbar__social { display: flex; gap: 24px; }
.topbar a:hover { text-decoration: underline; }
.topbar__phone { display: none; }

/* --------------------------------------------------------------- header */

.site-header { padding-block: 24px 8px; }
.site-header--overlay {
  position: relative;
  z-index: 3;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  padding: 10px 32px 10px 24px;
  background: var(--surface-white);
  border-radius: 100px;
  box-shadow: var(--shadow-card);
}

.nav__logo { flex: none; }
.nav__logo img { width: 198px; height: 44px; }

.nav__links {
  display: flex;
  gap: 40px;
  font-size: 16px;
  color: var(--text-nav);
  white-space: nowrap;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--brand-orange); }

.nav__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-teal);
  white-space: nowrap;
}
.nav__phone img { width: 26px; height: 26px; }

.nav__burger {
  display: none;
  width: 28px; height: 20px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--text-nav);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__burger span + span { margin-top: 7px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ----------------------------------------------------------------- hero */

.hero { position: relative; }

.hero__photo {
  position: absolute;
  inset: 0 0 auto;
  height: 562px;
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-37.68deg, rgba(255, 255, 255, 0) 18.196%, rgba(245, 252, 255, 0.8) 50.864%);
}

.hero__body { position: relative; z-index: 2; padding-bottom: 16px; }

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 48px;
}
.hero__copy p { max-width: 621px; }

.hero__search-title { margin-top: 65px; }

/* --------------------------------------------------------------- search */

.search { margin-top: 31px; }

.search__tabs { display: flex; gap: 8px; }

/* The selected tab is white and merges into the card below;
   the other one stays orange as a switch. */
.search__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 10px 29px 10px 31px;
  background: var(--brand-orange);
  border: 0;
  border-radius: 15px 15px 0 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-on-dark);
  cursor: pointer;
}
.search__tab img { width: 24px; height: 24px; }
.search__tab .icon--active { display: none; }
.search__tab[aria-selected="true"] { background: var(--surface-white); color: var(--text-body); }
.search__tab[aria-selected="true"] .icon--active { display: block; }
.search__tab[aria-selected="true"] .icon--idle { display: none; }

.search__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--surface-white);
  border-radius: 0 15px 15px 15px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.search__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 20px;
  align-items: end;
}

.search__helper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.search__helper img { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card__media { position: relative; height: 210px; flex: none; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  background: var(--brand-orange);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-dark);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  min-height: 0;
}

.card__content { display: flex; flex-direction: column; gap: 10px; }

.card__title {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--brand-teal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.card__title:hover { color: var(--brand-orange); }

.card__meta {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}
.card__meta .icon { flex: none; width: 16px; height: 21px; }
.card__meta span { min-width: 0; }

.card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__price .price { white-space: nowrap; }

/* trip card – fixed height so grids line up, per the Figma master */
.card--trip { min-height: 503px; }
.card--offer { min-height: 472px; }

/* blog card */
.card--post .card__media { height: 180px; }
.card--post .card__body { justify-content: flex-start; gap: 10px; }
.card--post .card__title { -webkit-line-clamp: 3; }
.card__more { font-weight: 600; font-size: 14px; color: var(--brand-teal); }
.card--post:hover .card__more { color: var(--brand-orange); }

/* review card */
.card--review {
  gap: 12px;
  padding: 24px;
  overflow: visible;
}
.card--review p { font-size: 16px; line-height: 1.5; }
.card--review .review__author { font-weight: 600; font-size: 14px; }
.card--review .review__trip { font-weight: 600; font-size: 14px; color: var(--brand-orange); }

/* ------------------------------------------------------- why us pillars */

.why { display: grid; grid-template-columns: 696px minmax(0, 1fr); gap: 64px; }

.why__intro { max-width: 696px; margin-bottom: 24px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-box);
}
.pillar svg { width: 48px; height: 48px; flex: none; }
.pillar h3 { font-size: 19px; }
.pillar p { font-size: 14px; color: var(--text-muted); }

.gallery { display: flex; flex-direction: column; gap: 16px; }

.gallery__viewport { overflow: hidden; }
.gallery__track { display: flex; transition: transform .3s ease; }
.gallery__slide { flex: 0 0 100%; }

.gallery__photos { display: flex; gap: 16px; }
.gallery__photo {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 430px;
  border-radius: 16px;
  overflow: hidden;
}
.gallery__photo img { width: 100%; height: 100%; object-fit: cover; }

.stat-chip {
  position: absolute;
  top: 16px; left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: var(--brand-teal);
  border-radius: var(--radius-box);
}
.stat-chip strong { font-weight: 700; font-size: 28px; color: var(--brand-orange); }
.stat-chip span { font-size: 14px; color: var(--text-on-dark); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pager__count { font-size: 16px; color: var(--text-muted); }
.pager__arrows { display: flex; gap: 12px; }

.round-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: 50%;
  color: var(--brand-teal);
  cursor: pointer;
}
.round-btn--solid { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.round-btn:hover { border-color: var(--brand-teal); }
.round-btn--solid:hover { background: var(--brand-orange-dark); border-color: var(--brand-orange-dark); }

.quote {
  padding: 16px 20px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-box);
  font-style: italic;
  font-size: 16px;
  color: var(--brand-teal);
}

/* -------------------------------------------------------------- inquiry */

.inquiry { display: grid; grid-template-columns: 608px minmax(0, 608px); justify-content: space-between; gap: 64px; }

.inquiry__intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.inquiry__intro h2 { margin-bottom: 0; }

.contact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.contact-list a,
.contact-list li > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-teal);
}
.contact-list a:hover { color: var(--brand-orange); }
.contact-list svg { width: 24px; height: 24px; flex: none; color: var(--brand-orange); }

.fb-embed {
  width: 420px;
  max-width: 100%;
  margin-top: 16px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  overflow: hidden;
}
.fb-embed__cover { height: 140px; }
.fb-embed__cover img { width: 100%; height: 100%; object-fit: cover; }
.fb-embed__header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.fb-embed__avatar {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-orange);
  overflow: hidden;
}
.fb-embed__avatar img { width: 30px; height: auto; }
.fb-embed__name { font-weight: 700; font-size: 15px; color: var(--text-body); }
.fb-embed__meta { font-size: 13px; color: var(--text-muted); }
.fb-embed__actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.fb-embed__btn {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: #1877f2;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.fb-embed__btn--ghost { flex: none; background: #e4e6eb; color: #050505; }

.form-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------- footer */

.footer {
  background: var(--brand-teal);
  color: var(--text-on-dark);
  padding-block: 64px 32px;
}
.footer__inner { display: flex; flex-direction: column; gap: 40px; }

.newsletter { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.newsletter__text { width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
/* The eyebrow is a quiet accent, not a tracked-out label; the title borrows
   the Playfair voice every other heading on the site uses. */
.newsletter__eyebrow { font-weight: 600; font-size: 14px; color: var(--brand-orange); }
.newsletter__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
}
.newsletter__sub { font-size: 15px; opacity: .85; }

.newsletter__form { display: flex; gap: 12px; width: 560px; max-width: 100%; }
.newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: var(--surface-white);
  border: 0;
  border-radius: var(--radius-input);
  font-family: inherit;
  font-size: 16px;
  color: var(--text-body);
}

.footer__rule { height: 1px; background: rgba(255, 255, 255, .2); }

.footer__cols { display: flex; gap: 48px; }
.footer__brand { width: 360px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.footer__brand p { font-size: 15px; opacity: .85; }
.footer__brand img.logo { width: 198px; height: 44px; }

.footer__social { display: flex; gap: 12px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.footer__social a:hover { background: var(--brand-orange); }
.footer__social svg { width: 18px; height: 18px; }

.footer__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Column headings use the site's heading face rather than a small-caps label,
   with an orange rule tying them to the brand. */
.footer__col h3 {
  position: relative;
  padding-bottom: 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-on-dark);
}
.footer__col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--brand-orange);
  border-radius: 2px;
}
.footer__col a { font-size: 15px; opacity: .85; }
.footer__col a:hover { opacity: 1; color: var(--brand-orange); }

.footer__contact { display: flex; align-items: center; gap: 12px; }
.footer__contact-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}
.footer__contact-icon svg { width: 16px; height: 16px; color: #fff; }
.footer__contact-label { font-size: 13px; opacity: .6; }
.footer__contact-value { font-size: 15px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
}
.footer__bottom > *, .footer__legal a { opacity: .7; }
.footer__legal { display: flex; gap: 24px; }

/* ----------------------------------------------------------- breadcrumb */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: 16px;
  font-size: 14px;
  color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--brand-teal); }
.breadcrumb [aria-current="page"] { color: var(--text-body); }

/* ---------------------------------------------------------- page header */

.page-head { padding-block: 24px 32px; }
.page-head p { max-width: 760px; margin-top: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}
.chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

.chip--badge {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--text-on-dark);
  font-weight: 600;
}

.chip--filter { cursor: pointer; }
.chip--filter:hover { border-color: var(--brand-teal); }
.chip--filter[aria-pressed="true"] {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: var(--text-on-dark);
}

/* ----------------------------------------------------------- pagination */

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; }
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-body);
}
.pagination a:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.pagination [aria-current="page"] {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--text-on-dark);
  font-weight: 700;
}
.pagination svg { width: 11px; height: 12px; }

/* ================================================================ mobile */

@media (max-width: 1100px) {
  :root { --section-pad: 34px; }

  .why { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .inquiry { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search__fields .btn { grid-column: 1 / -1; }

  .nav__links { display: none; }
  .nav__phone { display: none; }
  .nav__burger { display: block; }
  .nav { padding: 10px 20px; }
}

@media (max-width: 767px) {
  :root { --section-pad: 25px; --radius-card: 15px; }

  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 24px; }

  .topbar__inner { height: 32px; font-size: 12px; }
  .topbar__social { display: none; }
  .topbar__phone { display: block; }

  .site-header { padding-block: 10px; }
  .nav { height: 35.2px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .nav__logo img { width: 158.4px; height: 35.2px; }

  /* On a narrow screen the diagonal wash no longer covers the copy,
     so fade the photo out downwards instead. */
  .hero__photo { height: 340px; }
  .hero__photo::after {
    background: linear-gradient(180deg, rgba(245, 252, 255, .94) 0%, rgba(245, 252, 255, .62) 45%, rgba(243, 243, 243, 1) 100%);
  }
  .hero__copy { padding-top: 24px; }
  .hero__search-title { margin-top: 32px; }
  .search { margin-top: 20px; }
  .search__tabs { flex-wrap: wrap; gap: 6px; }
  .search__tab { flex: 1; justify-content: center; padding: 10px 12px; font-size: 14px; }
  .search__card { padding: 16px; border-radius: 15px; }
  .search__fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }

  .gallery__photos { flex-direction: column; }
  .gallery__photo { height: 280px; }

  .newsletter { flex-direction: column; gap: 20px; }
  .newsletter__form { flex-direction: column; width: 100%; }
  .footer__cols { flex-direction: column; gap: 32px; }
  .footer__brand { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer { padding-block: 40px 24px; }

  .form-card { padding: 20px; }
  .section__header { flex-direction: column; align-items: flex-start; gap: 12px; }

  .card--trip, .card--offer { min-height: 0; }
}

/* --------------------------------------------------------- mobile drawer */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  background: rgba(18, 18, 18, .45);
}
.drawer[data-open="true"] { display: block; }

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(320px, 86vw);
  padding: 24px 20px;
  background: var(--surface-white);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}
.drawer__close {
  align-self: flex-end;
  width: 40px; height: 40px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--text-nav);
  cursor: pointer;
}
.drawer__links { display: flex; flex-direction: column; gap: 4px; }
.drawer__links a {
  padding: 12px 0;
  font-size: 18px;
  color: var(--text-nav);
  border-bottom: 1px solid var(--field-border);
}
.drawer__links a:hover { color: var(--brand-orange); }
.drawer__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brand-teal);
}
.drawer__phone img { width: 24px; height: 24px; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------- form feedback */

.form-note {
  margin: 0;
  padding: 12px 16px;
  background: var(--field-fill);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-input);
  font-size: 14px;
  color: var(--brand-teal);
}
.newsletter .form-note { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }

/* Filter card on listing pages – same card, square corners on every side. */
.search__card--flat { border-radius: var(--radius-card); }

/* ======================================================== product page */

.h2--sm { font-size: 26px; }

.title-block { padding-block: 8px 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.title-block h1 { font-size: 40px; }

/* gallery ------------------------------------------------------------- */

.product-gallery { display: grid; grid-template-columns: minmax(0, 880fr) 392px; gap: 8px; }
.product-gallery + .section { padding-top: 25px; }
.product-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }

.product-gallery figure,
.product-gallery__thumb {
  position: relative;
  margin: 0;
  border-radius: var(--radius-box);
  overflow: hidden;
}
.product-gallery__main { height: 420px; }
.product-gallery__thumb { height: 206px; padding: 0; border: 0; cursor: pointer; background: none; }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 99, 130, .55);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
}

/* content grid -------------------------------------------------------- */

.product-grid { display: grid; grid-template-columns: minmax(0, 832fr) 400px; gap: 48px; align-items: start; }
.product-main { display: flex; flex-direction: column; gap: 32px; }

.panel {
  padding: 24px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
}
.panel--tint { background: var(--field-fill); }
.panel > * + * { margin-top: 16px; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.tick-list { display: flex; flex-direction: column; gap: 10px; }
.tick-list li { display: flex; gap: 10px; font-size: 16px; }
.tick-list li::before { content: "✓"; color: var(--brand-teal); font-weight: 700; flex: none; }
.tick-list--plus li::before { content: "+"; color: var(--brand-orange); }
.tick-list--dot li::before { content: "•"; color: var(--brand-orange); }

.list-title { font-weight: 600; font-size: 16px; margin-bottom: 12px; }

/* programme accordion -------------------------------------------------- */

.programme__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }

.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-teal);
}
.link-icon:hover { color: var(--brand-orange); }
.link-icon svg { width: 16px; height: 16px; }

.accordion {
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--field-border); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: 0;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  color: var(--text-body);
  cursor: pointer;
}
.accordion__trigger svg { flex: none; width: 16px; height: 16px; color: var(--brand-orange); transition: transform .2s ease; }
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) { background: var(--field-fill); }

.accordion__panel { padding: 0 20px 16px; font-size: 14px; color: var(--text-muted); }

/* booking sidebar ------------------------------------------------------ */

.product-side { display: flex; flex-direction: column; gap: 20px; }

.booking { padding: 24px; background: var(--surface-white); border: 1px solid var(--field-border); border-radius: var(--radius-card); }
.booking__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.booking__price strong { font-weight: 700; font-size: 30px; line-height: 1.3; color: var(--brand-orange); }
.booking__rule { height: 1px; margin: 16px 0; background: var(--field-border); }
.booking__label { font-weight: 600; font-size: 16px; margin-bottom: 16px; }

.date-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-box);
  text-align: left;
  cursor: pointer;
}
.date-option[aria-pressed="true"] { background: var(--field-fill); border-color: var(--brand-orange); }
.date-option__date { font-weight: 600; font-size: 16px; color: var(--text-body); }
.date-option__note { font-size: 14px; color: var(--brand-orange); }
.date-option__price { font-weight: 700; font-size: 16px; color: var(--brand-teal); white-space: nowrap; }

.booking .btn + .btn { margin-top: 16px; }
.booking__phone { margin-top: 16px; text-align: center; font-size: 14px; color: var(--text-muted); }
.booking__phone a { font-weight: 700; color: var(--brand-teal); }

.organizer { padding: 20px; background: var(--field-fill); border: 1px solid var(--field-border); border-radius: var(--radius-card); }
.organizer__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.organizer__photo {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  flex: none;
  border-radius: 50%;
  background: #e6e6e6;
  font-size: 13px;
  color: var(--text-muted);
}
.organizer__name { font-weight: 600; font-size: 19px; color: var(--text-body); }
.organizer__role { font-size: 14px; color: var(--text-muted); }
.organizer .link-icon { margin-top: 16px; }

/* photo strip ---------------------------------------------------------- */

.photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.photo-strip figure { margin: 0; height: 220px; border-radius: var(--radius-box); overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-gallery { grid-template-columns: minmax(0, 1fr); }
  .product-gallery__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .title-block h1 { font-size: 28px; }
  .h2--sm { font-size: 22px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .product-gallery__main { height: 240px; }
  .product-gallery__thumb { height: 120px; }
  .photo-strip figure { height: 180px; }
  .panel { padding: 20px; }
}

/* --------------------------------------------------------- about page */

.about-contacts { display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap; }
.about-contacts .contact-list { margin-top: 0; }

/* ----------------------------------------------------------- articles */

.article { width: min(800px, 100%); margin-inline: auto; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.article h1 { font-size: 40px; margin-bottom: 20px; }
.article__hero { margin: 0 0 24px; height: 420px; border-radius: var(--radius-box); overflow: hidden; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__body > p { margin-bottom: 20px; font-size: 16px; line-height: 1.6; }
.article__body > h2 { font-size: 24px; margin: 32px 0 12px; }
.article__body .quote { margin-top: 32px; }

.cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--wide .card__media { height: 220px; }

@media (max-width: 767px) {
  .article h1 { font-size: 26px; }
  .article__hero { height: 220px; }
  .article__body > h2 { font-size: 20px; }
  .cards--wide { grid-template-columns: minmax(0, 1fr); }
  .about-contacts { gap: 32px; }
}
/* ===== WordPress additions =================================================
   Everything above this line is byte-identical to the static build at
   ~/tikroskeliones-web, so the two stay diffable. Below are the styles the
   dynamic build needs and the static one never had.
   ========================================================================== */

/* Error state for the server-rendered form flash. */
.form-note--error {
  background: #fdf0ee;
  border-color: #f0c9c2;
  color: #a3301f;
}

/* Hero panel for the Waavo hand-off tab. */
.search__handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.search__handoff p { flex: 1; min-width: 260px; margin: 0; }

/* An intro sentence that introduces the block right below it should read as
   one unit with it, not as a separate section. Leaves the 32px from
   .page-head doing the work, matching the trip listing's filter card. */
.section--flush-top { padding-top: 0; }

/* A trip with no extra photos has no side column, so the main image should
   use the full width instead of leaving the thumbnail track empty.

   Widening it alone is not enough: the 420px height is designed against the
   800px main column, so across the full 1200px the crop flattens to 2.9:1 and
   cuts the subject off. Drive the height from an aspect ratio instead, so a
   single photo is framed deliberately and scales with the viewport. The cap
   keeps it from dominating the page on wide screens; the floor preserves the
   240px the mobile layout asks for, which a ratio alone would undershoot. */
.product-gallery--single { grid-template-columns: minmax(0, 1fr); }
.product-gallery--single .product-gallery__main {
  height: auto;
  aspect-ratio: 12 / 5;
  max-height: 520px;
  min-height: 240px;
}

/* Hero slider. Slides are stacked and crossfaded rather than tracked
   horizontally: the copy sits over the photo, so sliding the pair sideways
   would drag the headline across the search card. */
/* Each moment opens the lightbox. The button covers the figure rather than
   wrapping the image, so the grid's sizing and rounding are untouched. */
.photo-strip figure { position: relative; }
.photo-strip__open {
  position: absolute; inset: 0;
  border: 0; padding: 0; background: none; cursor: zoom-in;
}
.photo-strip__open:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: -3px; }

/* Drag to change slide. pan-y keeps vertical scrolling with the browser while
   the horizontal axis is ours, which is what stops a swipe from both moving
   the slide and scrolling the page on a phone. */
.hero--slider { touch-action: pan-y; }
.hero--slider .hero__copy { cursor: grab; }
.hero--slider[data-dragging="true"] .hero__copy { cursor: grabbing; }
/* Text selection during a drag turns the gesture into a highlight. */
.hero--slider[data-dragging="true"] { user-select: none; }

/* The white gradient wash belongs over every slide, not just whichever one
   happens to paint last. It currently sits on top only because .hero__photo's
   ::after is the final box in DOM order and everything here is z-index:auto —
   one z-index on a slide would put the photo over the wash and the headline
   would lose its contrast. State the order instead of relying on it. */
.hero--slider .hero__slide { z-index: 0; }
.hero--slider .hero__photo::after { z-index: 1; }

/* The heading and lead used to be direct children of .hero__copy and were
   separated by its 20px gap. Wrapping them in .hero__text for the slider moved
   that gap outside the pair, collapsing them onto each other — so the wrapper
   has to carry the same gap itself. */
.hero__text { display: flex; flex-direction: column; gap: 20px; }

/* The slide wrapper exists even for a single hero, so it has to pass the
   photo's height through — .hero__photo img is sized at 100%, and against an
   auto-height wrapper that resolves to the file's own height and the cover
   crop is lost. */
.hero__slide { height: 100%; }

/* .hero__photo is already absolutely positioned with a fixed height, so it is
   the containing block and needs no help — overriding it to relative drops it
   back into flow and pushes the nav below the picture. */
.hero--slider .hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero--slider .hero__slide[data-active="true"] { opacity: 1; }
.hero--slider .hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero--slider .hero__copy { position: relative; }
.hero--slider .hero__text { transition: opacity .45s ease; }
.hero--slider .hero__text[data-active="false"] {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
}

.hero__dots { display: flex; gap: 8px; margin-top: 20px; }
.hero__dot {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 50%;
  /* The copy sits over the pale end of the hero gradient, so white dots are
     invisible there — tint them with the brand blue instead. */
  background: rgba(10, 99, 130, .28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero__dot:hover { background: rgba(10, 99, 130, .55); }
.hero__dot[aria-selected="true"] { background: var(--brand-orange); transform: scale(1.25); }
.hero__dot:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero--slider .hero__slide,
  .hero--slider .hero__text { transition: none; }
}

/* PDF download in the booking box. A quiet link, not a third button — it must
   not compete with "Užsakyti kelionę" directly above it. */
.booking__pdf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--brand-blue); text-decoration: none;
}
.booking__pdf:hover { text-decoration: underline; }
.booking__pdf svg { width: 16px; height: 16px; flex: none; }

/* The hotel name under a poilsinės card's destination title. Secondary, so it
   does not compete with the place the visitor is actually scanning for. */
.card__hotel {
  margin: -4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Gallery lightbox. The strip shows three photos at most, so anything beyond
   that is only reachable here. */
.product-gallery__main { position: relative; }
.product-gallery__open {
  position: absolute; inset: 0;
  border: 0; padding: 0; background: none; cursor: zoom-in;
}
.product-gallery__open:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: -3px; }
.product-gallery__more { cursor: zoom-in; }
.product-gallery__thumb { cursor: pointer; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: rgba(6, 30, 40, .92);
}
.lightbox[data-open="true"] { display: grid; }

.lightbox__stage { margin: 0; display: grid; place-items: center; min-width: 0; height: 100%; }
.lightbox__stage img {
  max-width: 100%; max-height: calc(100vh - 120px);
  border-radius: var(--radius-box); display: block;
}

.lightbox__close,
.lightbox__nav {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

.lightbox__close { position: absolute; top: 20px; right: 24px; }
.lightbox__close::before,
.lightbox__close::after {
  content: ""; position: absolute; width: 20px; height: 2px; background: currentColor;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

.lightbox__nav::before {
  content: ""; width: 12px; height: 12px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.lightbox__nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.lightbox__nav--next::before { transform: rotate(45deg); margin-right: 4px; }

.lightbox__count {
  position: absolute; left: 0; right: 0; bottom: 22px;
  margin: 0; text-align: center; color: #fff;
  font-size: 14px; font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .lightbox { padding: 12px; gap: 4px; }
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__stage img { max-height: calc(100vh - 150px); }
}

/* When the trip happened, set beside the author rather than on its own line:
   it qualifies the name, and a separate line would compete with the trip link
   below it. */
.review__date { color: var(--text-muted); font-weight: 400; }
.review__date::before { content: "·"; margin: 0 6px; }

/* A trip whose departures have all passed. Sits where the date row would be,
   so the card keeps its rhythm instead of collapsing, and reads as a state
   rather than missing data. */
.card__soon {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Facebook's page plugin draws its own white card, border and rounded corners,
   so the wrapper must not paint a second one around it. Keep the width and
   spacing the design gives this column and let the iframe fill it. */
.fb-embed--plugin { background: none; border: 0; border-radius: 0; }
.fb-embed--plugin iframe { display: block; width: 100%; }

/* Pasted third-party embed. The Waavo loader sets the iframe's height itself
   from postMessage, so imposing one here would either clip it or leave a gap. */
.waavo-embed { width: 100%; }
.waavo-embed iframe { display: block; width: 100%; border: 0; }
/* The hero uses Waavo's "absolutely positioned" bar so its dropdowns can
   escape the card instead of stretching the iframe to 550px. That takes the
   iframe out of flow, so reserve its height here or the panel collapses to
   nothing and the bar overlaps whatever follows. Matches data-min-height. */
.search__card .waavo-embed { position: relative; min-height: 112px; }

/* Third-party search embed, when supplied as a URL to frame. */
.embed-frame {
  position: relative;
  min-height: 720px;
  background: var(--surface-white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.embed-frame iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
}

/* Collapsible testimonial form. */
.review-form { margin-top: 32px; }
.review-form summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}
.review-form summary::-webkit-details-marker { display: none; }
.review-form[open] summary { margin-bottom: 20px; }
.review-form .form-card { max-width: 640px; }

/* Organiser avatar can now hold a real photo. */
.organizer__photo { overflow: hidden; font-weight: 700; font-size: 22px; color: var(--brand-teal); }
.organizer__photo img { width: 100%; height: 100%; object-fit: cover; }

/* WordPress core output inside article bodies. */
.article__body img,
.article__body iframe { max-width: 100%; border-radius: var(--radius-box); }
.article__body figure { margin: 24px 0; }
.article__body figcaption { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.article__body ul,
.article__body ol { margin: 0 0 20px 20px; list-style: revert; }
.article__body li { margin-bottom: 8px; }
.article__body a { color: var(--brand-teal); text-decoration: underline; }
.article__body a:hover { color: var(--brand-orange); }
.article__body blockquote:not(.quote) {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 3px solid var(--brand-orange);
  font-style: italic;
  color: var(--brand-teal);
}
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }

@media (max-width: 767px) {
  .embed-frame, .embed-frame iframe { min-height: 560px; }
  .search__handoff { flex-direction: column; align-items: stretch; }
}