/* Travel Advice page styles */
.travel-advice-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-page);
  padding-block: var(--space-page) var(--space-page);
}

.travel-advice-page section {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

/* Hero */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.hero-text {
  min-width: 0;
}

.hero-intro {
  max-width: 45ch;
  margin-block-end: 0;
}

.hero-figure {
  min-width: 0;
  margin-block-end: 0;
}

.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Planning */
.planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.planning-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.planning-unit {
  min-width: 0;
  border-block-start: var(--border-single);
  padding-block-start: var(--space-base);
}

.planning-unit h3 {
  margin-block-end: var(--space-tight);
}

.planning-unit p {
  max-width: 75ch;
}

.planning-unit .content-list {
  margin-block-start: var(--space-tight);
}

.planning-sidebar {
  min-width: 0;
}

.quick-tip {
  background-color: var(--color-paper-dark);
  border: var(--border-single);
  padding: var(--space-paragraph);
}

.quick-tip h4 {
  margin-block-end: var(--space-tight);
}

.quick-tip p {
  margin-block-end: 0;
}

/* Packing */
.packing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.packing-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.packing-unit {
  min-width: 0;
}

.packing-unit h3 {
  margin-block-end: var(--space-tight);
}

.packing-unit p {
  max-width: 75ch;
}

.packing-unit .content-list {
  margin-block-start: var(--space-tight);
}

.packing-figure {
  min-width: 0;
  margin-block-end: 0;
}

.packing-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Health */
.health-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.health-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.health-unit {
  min-width: 0;
}

.health-unit h3 {
  margin-block-end: var(--space-tight);
}

.health-unit p {
  max-width: 75ch;
}

.health-quote {
  min-width: 0;
}

.health-quote blockquote {
  margin-block-end: 0;
}

/* Budget */
.budget-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.budget-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.budget-unit {
  min-width: 0;
}

.budget-unit h3 {
  margin-block-end: var(--space-tight);
}

.budget-unit p {
  max-width: 75ch;
}

.budget-unit table {
  margin-block-start: var(--space-base);
}

.budget-unit .content-list {
  margin-block-start: var(--space-tight);
}

.budget-sidebar {
  min-width: 0;
}

.checklist-card {
  background-color: var(--color-paper-dark);
  border: var(--border-single);
  padding: var(--space-paragraph);
}

.checklist-card h4 {
  margin-block-end: var(--space-tight);
}

.checklist-card .content-list {
  margin-block-end: 0;
}

/* Documentation */
.documentation-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
  border-block-start: var(--border-double);
  border-block-end: var(--border-double);
  padding-block: var(--space-section);
}

.documentation-unit {
  min-width: 0;
}

.documentation-unit h3 {
  margin-block-end: var(--space-tight);
}

.documentation-unit p {
  max-width: 75ch;
}

.documentation-unit .content-list {
  margin-block-start: var(--space-tight);
}

/* Etiquette */
.etiquette-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}

.etiquette-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.etiquette-unit {
  min-width: 0;
}

.etiquette-unit h3 {
  margin-block-end: var(--space-tight);
}

.etiquette-unit p {
  max-width: 75ch;
}

.etiquette-unit .content-list {
  margin-block-start: var(--space-tight);
}

.etiquette-quote {
  min-width: 0;
}

.etiquette-quote blockquote {
  margin-block-end: 0;
}

/* FAQ */
.faq-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.faq-item {
  border-block-start: var(--border-single);
  padding-block-start: var(--space-base);
}

.faq-item summary {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  color: var(--color-ink);
  padding-block: var(--space-tight);
  list-style-position: inside;
}

.faq-item summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.faq-item p {
  max-width: 75ch;
  margin-block-start: var(--space-tight);
  margin-block-end: 0;
}

/* Callout */
.callout {
  background-color: var(--color-paper-dark);
  border: var(--border-single);
  padding: var(--space-base);
  margin-block-start: var(--space-base);
}

.callout p {
  margin-block-end: 0;
}

/* Tablet and desktop */
@media (min-width: 768px) {
  .travel-advice-page section {
    padding-inline: var(--container-padding-desktop);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-major);
  }

  .planning-grid,
  .budget-grid,
  .etiquette-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-major);
  }

  .packing-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-major);
  }

  .health-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-major);
  }

  .documentation-layout {
    gap: var(--space-major);
  }
}

@media (max-width: 767px) {
  .hero-intro {
    max-width: 100%;
  }

  .planning-unit p,
  .packing-unit p,
  .health-unit p,
  .budget-unit p,
  .documentation-unit p,
  .etiquette-unit p,
  .faq-item p {
    max-width: 100%;
  }
}