/* ==========================================================================
   Timberroot: Group Stays patterns
   Used by the "Group Stays" block patterns in /patterns. Every rule is scoped
   to .tr-groups (the class on each pattern's outer section) so nothing here
   touches the rest of the site, and Astra/core styles don't leak in.
   ========================================================================== */

.tr-groups{
  --trg-cream:#fbf8f1; --trg-paper:#f4eee2; --trg-green:#69745d; --trg-green-dark:#565f4c;
  --trg-espresso:#473129; --trg-ink:#312824; --trg-rule:#e3d9c6; --trg-copper:#c6863b;
  --trg-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --trg-util:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Content width = the header's content width (header bar: max-width 1240px with 24px side padding).
     If the header width changes, change these two values to match. */
  --trg-content:1192px; --trg-gutter:24px;
  --trg-side:max(var(--trg-gutter), calc((100% - var(--trg-content)) / 2));
  box-sizing:border-box; color:var(--trg-ink); font-size:17px; line-height:1.6;
}
/* Side padding keeps content inside the header's width even when Astra stretches the section full width */
.tr-groups.tr-groups{padding-left:var(--trg-side);padding-right:var(--trg-side)}
.tr-groups *,.tr-groups *::before,.tr-groups *::after{box-sizing:border-box}
.tr-groups :is(h2,h3,h4,p,ul,figure){margin:0;padding:0}
.tr-groups.tr-groups :is(h2,h3,h4){font-family:var(--trg-serif);color:var(--trg-espresso);font-weight:700;letter-spacing:0;text-transform:none}
.tr-groups a:focus-visible{outline:3px solid var(--trg-green);outline-offset:3px;border-radius:2px}

/* ---------- Intro ---------- */
.tr-groups.trg-intro{padding-top:72px;padding-bottom:40px;text-align:center}
.tr-groups.tr-groups .trg-intro__title{font-size:clamp(30px,4vw,44px);line-height:1.15;margin-bottom:18px}
.tr-groups .trg-intro__text{max-width:680px;margin:0 auto 28px;font-size:18px}
.tr-groups .trg-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
.tr-groups .trg-actions .wp-block-button{margin:0}
.tr-groups .trg-actions .wp-block-button > .wp-block-button__link{display:inline-block;padding:14px 26px;border-radius:4px;font-family:inherit;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;border:2px solid var(--trg-green);box-shadow:none}
.tr-groups .trg-actions .wp-block-button.trg-btn--solid > .wp-block-button__link{background:var(--trg-green);color:#fff}
.tr-groups .trg-actions .wp-block-button.trg-btn--solid > .wp-block-button__link:hover{background:var(--trg-green-dark);border-color:var(--trg-green-dark);color:#fff}
.tr-groups .trg-actions .wp-block-button.trg-btn--line > .wp-block-button__link{background:transparent;color:var(--trg-green)}
.tr-groups .trg-actions .wp-block-button.trg-btn--line > .wp-block-button__link:hover{background:var(--trg-green);color:#fff}

/* ---------- Compare by group size ---------- */
.tr-groups.trg-finder{padding-top:16px;padding-bottom:56px}
.tr-groups.tr-groups .trg-finder__title{font-size:22px;text-align:center;margin-bottom:6px}
.tr-groups .trg-finder__text{text-align:center;margin-bottom:28px;color:#5d5049}
.tr-groups .trg-scale{list-style:none;margin:0;padding:0;border-top:1px solid var(--trg-rule)}
.tr-groups .trg-scale li{margin:0;padding:0;border-bottom:1px solid var(--trg-rule)}
.tr-groups .trg-scale a{display:grid;grid-template-columns:minmax(170px,240px) 1fr 92px;gap:20px;align-items:center;padding:16px 8px;text-decoration:none;color:var(--trg-ink)}
.tr-groups .trg-scale a:hover{background:var(--trg-paper)}
.tr-groups .trg-scale__name{display:block;font-family:var(--trg-serif);font-weight:700;font-size:19px;color:var(--trg-espresso)}
.tr-groups .trg-scale__best{display:block;font-size:14.5px;line-height:1.45;color:#6b5d55;margin-top:2px}
.tr-groups .trg-scale__track{position:relative;height:14px;background:var(--trg-paper);border-radius:7px;overflow:hidden}
.tr-groups .trg-scale__bar{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--trg-green);
  left:calc(var(--trg-min,0) / var(--trg-max) * 100%);
  width:calc((var(--trg-val) - var(--trg-min,0)) / var(--trg-max) * 100%)}
.tr-groups .trg-scale__num{text-align:right;font-weight:700;font-size:18px;white-space:nowrap}
.tr-groups .trg-scale__num span{display:block;font-weight:400;font-size:13px;color:#6b5d55}

/* ---------- Property ----------
   Row 1: photo | title block.  Row 2: text blocks | units chart.
   .trg-prop--flip puts the photo on the right. */
.tr-groups.trg-prop{display:grid;grid-template-columns:1.18fr 1fr;grid-template-areas:"media head" "feats units";column-gap:56px;row-gap:48px;padding-top:64px;padding-bottom:64px;background:linear-gradient(var(--trg-rule),var(--trg-rule)) no-repeat center top / min(100% - 2 * var(--trg-gutter), var(--trg-content)) 1px;scroll-margin-top:110px}
.tr-groups.trg-prop.trg-prop--flip{grid-template-columns:1fr 1.18fr;grid-template-areas:"head media" "units feats"}
.tr-groups.trg-finder + .tr-groups.trg-prop{background:none;padding-top:24px}
.tr-groups.trg-prop > *{margin:0;min-width:0;max-width:none}
.tr-groups .trg-prop__media{grid-area:media}
.tr-groups .trg-prop__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.tr-groups .trg-prop__head{grid-area:head;align-self:center}
.tr-groups .trg-feats{grid-area:feats;align-self:start}
.tr-groups .trg-units{grid-area:units;align-self:start}
.tr-groups.tr-groups .trg-title{font-size:clamp(30px,3.4vw,42px);line-height:1.1;margin-bottom:14px}
.tr-groups .trg-sleeps{display:flex;width:fit-content;align-items:baseline;gap:8px;padding:6px 14px;border-radius:15px;background:var(--trg-green);color:#fff;font-weight:600;font-size:15px;margin-bottom:18px}
.tr-groups .trg-sleeps strong{font-size:20px;color:#fff}
.tr-groups .trg-best{font-size:18px;margin-bottom:22px;max-width:46ch}
.tr-groups .trg-best strong{color:var(--trg-espresso)}
.tr-groups .trg-link{margin:0}
.tr-groups .trg-link a{color:var(--trg-green);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Text blocks: two columns; an odd last block spans both */
.tr-groups .trg-feats{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;padding:0 32px}
.tr-groups .trg-feats > *{margin:0}
.tr-groups .trg-feat:last-child:nth-child(odd){grid-column:1 / -1}
.tr-groups.tr-groups .trg-feat__title{font-size:18px;line-height:1.3;margin-bottom:4px}
.tr-groups .trg-feat__text{font-size:15.5px;line-height:1.6;color:#4a3d37;margin:0}

/* Units & capacity chart (core Table block) */
.tr-groups.tr-groups .trg-units__title{font-size:20px;margin-bottom:12px}
.tr-groups .trg-table{margin:0;overflow-x:auto;border:1px solid var(--trg-espresso);border-radius:4px}
.tr-groups .trg-table table{width:100%;min-width:340px;margin:0;border:0;border-collapse:collapse;background:#faf8f1;font-family:var(--trg-util);font-size:15px;color:var(--trg-espresso);font-variant-numeric:tabular-nums}
.tr-groups .trg-table thead{border-bottom:0}
.tr-groups .trg-table :is(th,td){border:1px solid var(--trg-espresso);padding:11px 10px;text-align:center;font-weight:500;vertical-align:middle}
.tr-groups .trg-table th{background:var(--trg-espresso);color:#fbf8f1;font-weight:700;border-left-color:var(--trg-copper);border-right-color:var(--trg-copper)}
.tr-groups .trg-table tr > :first-child{border-left:0}
.tr-groups .trg-table tr > :last-child{border-right:0}
.tr-groups .trg-table thead tr > *{border-top:0}
.tr-groups .trg-table tbody tr:last-child > *{border-bottom:0}
.tr-groups .trg-table td:nth-child(2){font-weight:600}
.tr-groups .trg-table td em{font-style:italic}
.tr-groups .trg-note{font-size:13.5px;color:#6b5d55;margin-top:8px}

/* ---------- Why choose (dark band) ---------- */
.tr-groups.trg-why{padding-top:72px;padding-bottom:72px;background:var(--trg-ink);box-shadow:0 0 0 100vmax var(--trg-ink);clip-path:inset(0 -100vmax);color:#f3ece0}
.tr-groups .trg-why__inner{margin:0}
.tr-groups.tr-groups .trg-why__title{color:#fbf8f1;font-size:clamp(28px,3.4vw,40px);text-align:center;margin-bottom:40px}
.tr-groups .trg-why__list{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.tr-groups .trg-why__list > *{margin:0}
.tr-groups .trg-why__item{border-top:2px solid var(--trg-copper);padding-top:18px;font-size:17px;line-height:1.45;color:#f3ece0}

/* ---------- Three text columns ---------- */
.tr-groups.trg-fit{padding-top:72px;padding-bottom:40px}
.tr-groups .trg-fit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.tr-groups .trg-fit__grid > *{margin:0}
.tr-groups.tr-groups .trg-fit__title{font-size:24px;line-height:1.25;margin-bottom:12px}
.tr-groups .trg-fit__text{font-size:16px;line-height:1.7}
.tr-groups .trg-fit__text b,.tr-groups .trg-fit__text strong{color:var(--trg-espresso)}
.tr-groups .trg-fit__text a{color:var(--trg-green)}

/* ---------- Responsive (one build, all sizes) ---------- */
@media (max-width:1000px){
  .tr-groups .trg-why__list{grid-template-columns:repeat(2,1fr)}
  .tr-groups .trg-fit__grid{grid-template-columns:1fr;gap:32px;max-width:720px}
}
@media (max-width:760px){
  .tr-groups.trg-intro{padding-top:48px;padding-bottom:28px}
  .tr-groups.trg-prop,.tr-groups.trg-prop.trg-prop--flip{grid-template-columns:1fr;grid-template-areas:"media" "head" "units" "feats";row-gap:28px;padding-top:48px;padding-bottom:48px}
  .tr-groups .trg-feats{grid-template-columns:1fr;gap:20px;padding:0 8px}
  .tr-groups .trg-scale a{grid-template-columns:1fr 70px;gap:8px 12px}
  .tr-groups .trg-scale__track{grid-column:1 / -1;grid-row:2}
  .tr-groups .trg-why__list{grid-template-columns:1fr;gap:20px}
  .tr-groups .trg-table table{font-size:14.5px}
  .tr-groups .trg-table :is(th,td){padding:10px 6px}
}