/* Trip Guides hub — /guides/ */

.ghero{position:relative;background:var(--secondary-dark);
  & .ghero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  & .ghero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 36 32/.55) 0%,rgb(11 36 32/.25) 45%,rgb(11 36 32/.55) 100%)}
  & .ghero__inner{position:relative;padding:110px 24px 60px;min-height:var(--hero-min-short);display:flex;flex-direction:column;justify-content:center}
  & .ghero__meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
  & .ghero__coords{font:500 11px var(--font-mono);letter-spacing:.1em;color:rgb(255 255 255/.65)}
  & .kicker{font-size:11px}
  & h1{margin:18px 0 0;font:800 clamp(38px,5vw,56px)/1.08 var(--font-display);color:var(--white)}
  & > .wrap-wide > p{margin:18px 0 0;max-width:640px;font:400 18px/1.7 var(--font-body);color:var(--on-dark-2)}
}
.gsearch{position:relative;border-top:1px solid rgb(255 255 255/.22);background:rgb(11 36 32/.62);backdrop-filter:blur(6px);margin-top:48px;
  & .gsearch__inner{padding:15px 24px;display:flex;align-items:center;gap:16px}
  & .gsearch__label{font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--on-dark-4);flex-shrink:0}
  & svg{width:19px;height:19px;flex-shrink:0}
  & input{flex:1;min-width:0;background:transparent;border:none;padding:8px 0;font:400 18px var(--font-body);color:var(--white);caret-color:var(--primary-light);
    &::placeholder{color:var(--caption-soft);font-weight:400}
    &:focus{outline:none}
  }
}

.ghub{padding:48px 20px 60px}

.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px;
  & .chips__label{font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--caption);margin-right:4px}
  & .chips__count{font:400 14px var(--font-body);color:var(--base-muted);margin-left:6px}
}
.chip{border:1px solid var(--line-strong);background:var(--card);color:var(--base);border-radius:var(--radius);padding:9px 16px;font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  &.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
}

.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.gcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;box-shadow:0 2px 6px rgb(29 62 76/.06);transition:transform .18s,box-shadow .18s;
  &:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgb(29 62 76/.14)}
  & .gcard__img{height:186px;overflow:hidden;background:var(--surface-shade)}
  & .gcard__img img{width:100%;height:100%;object-fit:cover;display:block}
  & .gcard__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
  & .gcard__cat{font:700 10.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--primary-deep)}
  & .gcard__title{margin:0;font:700 18px/1.35 var(--font-display);color:var(--heading-soft)}
  & .gcard__ex{margin:0;font:400 15px/1.55 var(--font-body);color:var(--base-muted);flex:1}
  & .gcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font:400 12px var(--font-body);color:var(--caption)}
  & .gcard__go{font:600 13px var(--font-display);color:var(--primary-deep)}
}
@media (prefers-reduced-motion:reduce){.gcard{transition:none;&:hover{transform:none}}}

.gempty{padding:40px 4px;
  & .gempty__h{font:700 20px var(--font-display);color:var(--heading-soft);margin-bottom:8px}
  & p{font:400 16px/1.7 var(--font-body);color:var(--base-muted)}
}

/* About the team. */
.tworow{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;
  & img{width:100%;height:320px;object-fit:cover;display:block;border-radius:var(--radius)}
}
@media (max-width:900px){
  .tworow{grid-template-columns:1fr;gap:28px}
  .ghero .ghero__inner{padding:80px 20px 40px}
  .ghero .ghero__coords{display:none}
  .gsearch{margin-top:28px}
  .gsearch .gsearch__label{display:none}
}