/* Shared verbatim with english/tips.css: each language has its own site root.
   Tips-only classes keep the existing site navigation and footer untouched. */
.tips-main {
  --section-green: #DADFC2;
  --terra: #C25D3D;
  --tips-gutter: clamp(20px, 4vw, 56px);
  --tips-line: rgba(31,42,35,.16);
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--paper, #FAF4E4);
  color: #1F2A23;
  font: 400 17px/1.55 "Nunito", "Segoe UI", system-ui, sans-serif;
}
.tips-main :is(h1, h2, h3) { font-family: inherit; letter-spacing: -.02em; }
.tips-main a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.tips-hero { padding: clamp(20px, 2.5vw, 36px) 0 124px; }
.tips-hero-inner { width: min(1240px, calc(100% - 2 * var(--tips-gutter))); margin: 0 auto; }
.tips-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; font-size: 14px; }
.tips-breadcrumb a { color: inherit; }
.tips-main h1 { margin: 0; font-size: clamp(42px, 5vw, 66px); font-weight: 900; line-height: 1; letter-spacing: -.025em; }

/* Homepage green hero, then matching cream and sage topic bands. */
.tips-index .tips-hero {
  color: #F6EFE3;
  background: linear-gradient(0deg, rgba(7,22,17,.5), transparent 65%),
    radial-gradient(circle at 83% 5%, #e0a93d66, #e0a93d21 38%, transparent 66%), var(--green-dark, #0F2A22);
}
.tips-index h1 { color: #F6EFE3; max-width: 640px; }
.tips-topic { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.tips-topic-destinations { background: #F7EFDD; }
.tips-topic-inner { width: min(1240px, calc(100% - 2 * var(--tips-gutter))); margin: 0 auto; }
.tips-topic h2 { margin: 0 0 24px; color: var(--green, #1F4536); font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; line-height: 1.02; }
.tips-topic-family { background: var(--section-green); }
.tips-card-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tips-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--tips-line); border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(31,42,35,.05), 0 18px 40px -24px rgba(31,42,35,.28); }
.tips-card-motif { display: block; width: 72px; height: auto; }
.tips-card-content { min-width: 0; }
.tips-card h3 { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; }
.tips-card h3 a { color: var(--green, #1F4536); text-decoration: none; }
.tips-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tips-card p { max-width: none; font-size: 16px; line-height: 1.6; color: #4A4F4B; margin: 0; }

/* Overview only: unchanged tree SVG from index.html #ready > svg.motif.
   Stay entirely inside the existing bottom padding, clear of all content. */
.tips-index .tips-topic { position: relative; }
.tips-index .tips-topic::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: var(--tips-gutter);
  width: 100px;
  height: calc(clamp(64px, 8vw, 104px) - 16px);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20560%22%3E%20%3Cg%20fill%3D%22%231F4536%22%20opacity%3D%220.09%22%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22200%22%20r%3D%22150%22%2F%3E%3Ccircle%20cx%3D%22165%22%20cy%3D%22250%22%20r%3D%22112%22%2F%3E%3Ccircle%20cx%3D%22352%22%20cy%3D%22238%22%20r%3D%22122%22%2F%3E%3Ccircle%20cx%3D%22228%22%20cy%3D%22118%22%20r%3D%2298%22%2F%3E%3Ccircle%20cx%3D%22322%22%20cy%3D%22128%22%20r%3D%2292%22%2F%3E%3Ccircle%20cx%3D%22262%22%20cy%3D%22272%22%20r%3D%22120%22%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%22%231F4536%22%20opacity%3D%220.14%22%3E%3Crect%20x%3D%22240%22%20y%3D%22300%22%20width%3D%2240%22%20height%3D%22280%22%20rx%3D%2220%22%2F%3E%3Cpath%20d%3D%22M262%20392%20L198%20306%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%2228%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M262%20356%20L334%20282%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%2226%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M262%20440%20L318%20386%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%2222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%22%23E0A93D%22%20opacity%3D%220.22%22%3E%3Ccircle%20cx%3D%22182%22%20cy%3D%22160%22%20r%3D%2234%22%2F%3E%3Ccircle%20cx%3D%22346%22%20cy%3D%22304%22%20r%3D%2238%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22322%22%20r%3D%2226%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%2296%22%20r%3D%2222%22%2F%3E%3C%2Fg%3E%20%3Cellipse%20cx%3D%22260%22%20cy%3D%22574%22%20rx%3D%22190%22%20ry%3D%2226%22%20fill%3D%22%231F4536%22%20opacity%3D%220.07%22%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: .4;
  pointer-events: none;
}
.tips-index .tips-topic-family::after { left: auto; right: var(--tips-gutter); }
@media (max-width: 900px) { .tips-index .tips-topic::after { display: none; } }

/* Overview route: site.js catmull() and styles.css .trail-path.light.
   Hills: book-stack.js .bs-motif (kind 2); original tiny shoe and bicycle.
   Paint beneath opaque cards/headings: only margins and empty gaps reveal it. */
@media (min-width: 1024px) {
  .tips-index .tips-topic { isolation: isolate; }
  .tips-index .tips-topic::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20C120.0%2013.3%2C%20486.7%2050.0%2C%20720%2080%20C953.3%20110.0%2C%201400.0%20143.3%2C%201400%20180%20C1400.0%20216.7%2C%20946.7%20263.3%2C%20720%20300%20C493.3%20336.7%2C%2040.0%20366.7%2C%2040%20400%20C40.0%20433.3%2C%20486.7%20466.7%2C%20720%20500%20C953.3%20533.3%2C%201320.0%20583.3%2C%201440%20600%22%20fill%3D%22none%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%221%209%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.34%22%2F%3E%3Cg%20transform%3D%22translate%28720%2080%29%22%20opacity%3D%22.62%22%3E%3Cpath%20d%3D%22M-6-5H-2L-1-1%202%201%206%202Q8%202%208%205H-7V1Z%22%20fill%3D%22%238D9950%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%22.85%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M-7%203H7M-2-1L0-2M0%201L2%200%22%20fill%3D%22none%22%20stroke%3D%22%231F4536%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%0A%3Cg%20transform%3D%22translate%281400%20180%29%22%20opacity%3D%22.62%22%3E%3Ccircle%20cx%3D%223.3%22%20cy%3D%22-3%22%20r%3D%222.1%22%20fill%3D%22%23E0A93D%22%2F%3E%3Cpath%20d%3D%22M-7%203Q-3-2%201%201Q4-1%207%203V5H-7Z%22%20fill%3D%22%238D9950%22%2F%3E%3Cpath%20d%3D%22M-7%205Q0-.5%207%203V6H-7Z%22%20fill%3D%22%231F4536%22%2F%3E%3C%2Fg%3E%0A%3Cg%20transform%3D%22translate%2840%20400%29%22%20opacity%3D%22.62%22%20fill%3D%22none%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%231F4536%22%3E%3Ccircle%20cx%3D%22-5%22%20cy%3D%223%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%223%22%20r%3D%223.5%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M-5%203L-2-3%202%203H-5M-2-3H4L2%203M6%203L3-6H5M-4-4H-1%22%20stroke%3D%22%23C9755A%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22500%22%20r%3D%222.5%22%20fill%3D%22%23C9755A%22%20opacity%3D%22.62%22%2F%3E%3C%2Fsvg%3E") center top / 100% 600px repeat-y;
    opacity: .5;
    pointer-events: none;
  }
  .tips-index .tips-card,
  .tips-index .tips-topic h2 { position: relative; z-index: 1; }
  .tips-index .tips-topic-destinations h2 { background: #F7EFDD; }
  .tips-index .tips-topic-family h2 { background: var(--section-green); }
}

/* All articles share the same sage surround and cream reading panel. */
.tips-article, .tips-article .tips-hero { background: var(--section-green); color: var(--green-dark, #0F2A22); }
.tips-article .tips-hero-inner { width: min(760px, calc(100% - 40px)); }
.tips-article h1 { color: var(--green-dark, #0F2A22); }
.tips-reading { position: relative; padding: 0 0 80px; }
.tips-copy {
  position: relative;
  top: -64px;
  width: min(888px, calc(100% - 40px));
  margin: 0 auto -64px;
  padding: 44px 64px 56px;
  border: 1px solid var(--tips-line);
  border-radius: 26px;
  background: var(--paper, #FAF4E4);
  box-shadow: 0 18px 36px -26px rgba(7,22,17,.45), 0 2px 8px rgba(31,42,35,.06);
  color: #1F2A23;
  font-size: 18px;
  line-height: 1.75;
}
.tips-copy p { max-width: none; margin: 0 0 24px; }
.tips-copy > p:first-child { background: #F7EFDD; padding: 24px; border-radius: 18px; border: 1px solid var(--tips-line); }
.tips-copy :is(h2, h3) { color: var(--terra); font-size: clamp(25px, 3vw, 32px); font-weight: 900; line-height: 1.2; margin: 48px 0 20px; }
.tips-copy ul, .tips-copy ol { padding-left: 26px; margin: 0 0 24px; }
.tips-copy > :last-child { margin-bottom: 0; }
.tips-copy a { color: var(--green, #1F4536); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
/* Anchor to the whole article, including the hero; paint above its background.
   Gutters stay at least 36px clear of the panel. Offset the SVG centering
   inside each tall repeat tile so the first left motif sits beside the H1. */
.tips-article { position: relative; isolation: isolate; }
.tips-article::before, .tips-article::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 80px;
  bottom: 80px;
  width: max(0px, calc((100% - 960px) / 2));
  background: var(--tips-motif) right -256px / 128px 640px repeat-y;
  opacity: .10;
  pointer-events: none;
}
.tips-article::before { left: 0; }
.tips-article::after {
  right: 0;
  top: 350px;
  background-position: left -276px;
  background-size: 128px 680px;
}
.tips-theme-flight { --tips-motif: url("/assets/tips/flight.svg"); }
.tips-theme-tenerife { --tips-motif: url("/assets/tips/tenerife.svg"); }
.tips-theme-egypt { --tips-motif: url("/assets/tips/egypt.svg"); }
.tips-theme-lizard { --tips-motif: url("/assets/tips/lizard.svg"); }
.tips-theme-car { --tips-motif: url("/assets/tips/car.svg"); }
.tips-theme-day-away { --tips-motif: url("/assets/tips/day-away.svg"); }
.tips-theme-thailand { --tips-motif: url("/assets/tips/thailand.svg"); }
.tips-theme-coffee { --tips-motif: url("/assets/tips/coffee.svg"); }
.tips-theme-souvenirs { --tips-motif: url("/assets/tips/souvenirs.svg"); }
@media (max-width: 1180px) { .tips-article::before, .tips-article::after { display: none; } }
@media (max-width: 600px) {
  .tips-card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 14px; align-items: start; }
  .tips-card-motif { width: 44px; }
  .tips-card h3 { font-size: 21px; }
  .tips-article h1 { font-size: 36px; }
  .tips-copy { width: calc(100% - 24px); padding: 26px 20px 36px; border-radius: 22px; font-size: 17px; }
  .tips-copy > p:first-child { padding: 18px; }
  .tips-copy :is(h2, h3) { margin-top: 36px; }
  .tips-reading { padding-bottom: 40px; }
}