/* ============================================================
   NEXO SURFHOUSE — APP CSS (page-level components)  v1.0.0
   ============================================================ */

/* ── Stats bar ───────────────────────────────────────────────── */
.nexo-stats-bar { background:var(--nexo-dark); color:#fff; padding:1.5rem 0; }
.nexo-stats-bar__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.nexo-stat__value { font-size:2rem; font-weight:800; color:var(--nexo-accent); line-height:1.1; }
.nexo-stat__label { font-size:0.85rem; color:rgba(255,255,255,0.65); margin-top:0.25rem; }

/* ── Feature cards ───────────────────────────────────────────── */
.nexo-features__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.nexo-feature { background:#fff; border:1px solid var(--nexo-border); border-radius:var(--nexo-radius-lg); padding:2rem; text-align:center; transition:var(--nexo-transition); }
.nexo-feature:hover { box-shadow:var(--nexo-shadow-lg); transform:translateY(-4px); }
.nexo-feature__icon { width:64px; height:64px; border-radius:var(--nexo-radius); background:var(--nexo-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; transition:var(--nexo-transition); }
.nexo-feature:hover .nexo-feature__icon { transform:scale(1.1); }
.nexo-feature__icon svg { width:28px; height:28px; fill:#fff; }
.nexo-feature__title { font-size:1.0625rem; font-weight:700; margin-bottom:0.5rem; }
.nexo-feature__desc  { font-size:0.9rem; color:var(--nexo-muted); line-height:1.65; }

/* ── Parallax section ────────────────────────────────────────── */
.nexo-parallax { position:relative; padding:8rem 0; background-attachment:fixed; background-size:cover; background-position:center; }
.nexo-parallax__overlay { position:absolute; inset:0; }
.nexo-parallax__content { position:relative; z-index:1; text-align:center; color:#fff; }
.nexo-parallax__title   { font-size:clamp(2rem,4vw,3rem); font-weight:800; color:#fff; margin-bottom:1rem; }
.nexo-parallax__text    { font-size:1.125rem; opacity:.9; max-width:640px; margin:0 auto 2rem; }

/* ── Packs grid ──────────────────────────────────────────────── */
.nexo-packs__filters { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.nexo-filter-btn { padding:0.5rem 1.25rem; border-radius:9999px; border:2px solid var(--nexo-border); background:#fff; color:var(--nexo-muted); font-weight:600; font-size:0.875rem; cursor:pointer; transition:var(--nexo-transition); }
.nexo-filter-btn.is-active,.nexo-filter-btn:hover { background:var(--nexo-primary); border-color:var(--nexo-primary); color:#fff; }
.nexo-pack-card__includes { list-style:none; padding:0; margin:0.75rem 0 1rem; }
.nexo-pack-card__includes li { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.875rem; margin-bottom:0.5rem; }
.nexo-pack-card__includes li::before { content:'✓'; color:var(--nexo-primary); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ── Testimonials ────────────────────────────────────────────── */
.nexo-testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.nexo-testimonial { background:#fff; border-radius:var(--nexo-radius-xl); padding:2rem; box-shadow:var(--nexo-shadow); }
.nexo-testimonial__stars { margin-bottom:1rem; }
.nexo-testimonial__text  { font-style:italic; color:var(--nexo-dark); line-height:1.7; margin-bottom:1.5rem; }
.nexo-testimonial__author { display:flex; align-items:center; gap:0.75rem; }
.nexo-testimonial__avatar { width:44px; height:44px; border-radius:50%; background:var(--nexo-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.125rem; flex-shrink:0; }
.nexo-testimonial__name   { font-weight:700; font-size:0.9375rem; }
.nexo-testimonial__origin { font-size:0.8125rem; color:var(--nexo-muted); }

/* ── Gallery masonry ─────────────────────────────────────────── */
.nexo-gallery-grid { columns:4; gap:1rem; }
.nexo-gallery-item { break-inside:avoid; border-radius:var(--nexo-radius); overflow:hidden; margin-bottom:1rem; position:relative; cursor:pointer; }
.nexo-gallery-item img { width:100%; display:block; transition:transform 0.4s ease; }
.nexo-gallery-item:hover img { transform:scale(1.04); }
.nexo-gallery-item__overlay { position:absolute; inset:0; background:rgba(26,38,54,0); transition:var(--nexo-transition); display:flex; align-items:flex-end; padding:1rem; }
.nexo-gallery-item:hover .nexo-gallery-item__overlay { background:rgba(26,38,54,0.4); }
.nexo-gallery-item__label { color:#fff; font-size:0.875rem; font-weight:600; opacity:0; transform:translateY(6px); transition:var(--nexo-transition); }
.nexo-gallery-item:hover .nexo-gallery-item__label { opacity:1; transform:none; }

/* ── Blog grid ───────────────────────────────────────────────── */
.nexo-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.nexo-post-featured { grid-column:1/-1; }
.nexo-post-featured .nexo-card { display:grid; grid-template-columns:1fr 1fr; }
.nexo-post-featured .nexo-card__img { aspect-ratio:auto; }

/* ── Contact ─────────────────────────────────────────────────── */
.nexo-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.nexo-contact-form .nexo-form { background:var(--nexo-light); border-radius:var(--nexo-radius-xl); padding:2.5rem; }
.nexo-form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.nexo-form__field { display:flex; flex-direction:column; gap:0.375rem; margin-bottom:1.25rem; }
.nexo-form__label { font-size:0.875rem; font-weight:700; color:var(--nexo-dark); }
.nexo-form__input,.nexo-form__select,.nexo-form__textarea { width:100%; padding:0.875rem 1rem; border:2px solid var(--nexo-border); border-radius:var(--nexo-radius); font-family:var(--nexo-font-sans); font-size:0.9375rem; color:var(--nexo-dark); background:#fff; transition:var(--nexo-transition); }
.nexo-form__input:focus,.nexo-form__select:focus,.nexo-form__textarea:focus { outline:none; border-color:var(--nexo-primary); box-shadow:0 0 0 3px rgba(30,115,190,0.12); }
.nexo-form__textarea { resize:none; height:140px; }

/* ── FAQ accordion ───────────────────────────────────────────── */
.nexo-faq__item { background:#fff; border-radius:var(--nexo-radius); margin-bottom:0.75rem; box-shadow:0 2px 10px rgba(0,0,0,0.05); overflow:hidden; }
.nexo-faq__question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; background:none; border:none; text-align:left; font-family:var(--nexo-font-sans); font-size:1rem; font-weight:700; color:var(--nexo-dark); cursor:pointer; transition:var(--nexo-transition); }
.nexo-faq__question:hover { color:var(--nexo-primary); }
.nexo-faq__icon { font-size:1.5rem; color:var(--nexo-primary); flex-shrink:0; transition:transform 0.3s; }
.nexo-faq__item.is-open .nexo-faq__icon { transform:rotate(45deg); }
.nexo-faq__answer { padding:0 1.5rem 1.25rem; color:var(--nexo-muted); line-height:1.7; display:none; }
.nexo-faq__item.is-open .nexo-faq__answer { display:block; }

/* ── Map placeholder ─────────────────────────────────────────── */
.nexo-map { border-radius:var(--nexo-radius-xl); overflow:hidden; min-height:360px; background:var(--nexo-light); display:flex; align-items:center; justify-content:center; }

/* ── Roomtype cards ──────────────────────────────────────────── */
.nexo-room-card { border-radius:var(--nexo-radius-xl); overflow:hidden; border:1px solid var(--nexo-border); }
.nexo-room-card__img { height:220px; overflow:hidden; }
.nexo-room-card__img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.nexo-room-card:hover .nexo-room-card__img img { transform:scale(1.05); }
.nexo-room-card__body { padding:1.5rem; }
.nexo-room-card__features { list-style:none; padding:0; margin:0.75rem 0 1.25rem; display:flex; flex-direction:column; gap:0.5rem; }
.nexo-room-card__features li { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; }
.nexo-room-card__features li::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--nexo-accent); flex-shrink:0; }

/* ── Timeline ────────────────────────────────────────────────── */
.nexo-timeline { max-width:760px; margin:0 auto; }
.nexo-timeline__item { display:flex; gap:1.5rem; margin-bottom:2rem; }
.nexo-timeline__dot { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.nexo-timeline__circle { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.8125rem; }
.nexo-timeline__line { width:2px; flex:1; background:var(--nexo-border); margin-top:4px; }
.nexo-timeline__content { background:#fff; border-radius:var(--nexo-radius); padding:1.25rem 1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.05); flex:1; }
.nexo-timeline__year { font-size:0.8125rem; font-weight:700; color:var(--nexo-primary); margin-bottom:0.25rem; }
.nexo-timeline__text { color:var(--nexo-dark); margin:0; }

/* ── Surfhouse amenity grid ──────────────────────────────────── */
.nexo-amenities__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.nexo-amenity { background:#fff; border-radius:var(--nexo-radius); padding:1.5rem; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,0.06); transition:var(--nexo-transition); }
.nexo-amenity:hover { box-shadow:var(--nexo-shadow); }
.nexo-amenity__icon { width:48px; height:48px; border-radius:var(--nexo-radius); background:var(--nexo-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem; }
.nexo-amenity__icon svg { width:22px; height:22px; fill:#fff; }
.nexo-amenity__label { font-size:0.875rem; font-weight:600; }

/* ── Blog category filter ────────────────────────────────────── */
.nexo-blog-filters { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.nexo-cat-btn { padding:0.5rem 1rem; border-radius:9999px; border:2px solid var(--nexo-border); background:#fff; color:var(--nexo-muted); font-weight:600; font-size:0.875rem; cursor:pointer; transition:var(--nexo-transition); }
.nexo-cat-btn.is-active,.nexo-cat-btn:hover { background:var(--nexo-primary); border-color:var(--nexo-primary); color:#fff; }

/* ── Responsive app ──────────────────────────────────────────── */
@media(max-width:1024px){
  .nexo-stats-bar__grid { grid-template-columns:repeat(2,1fr); }
  .nexo-features__grid  { grid-template-columns:repeat(2,1fr); }
  .nexo-amenities__grid { grid-template-columns:repeat(2,1fr); }
  .nexo-gallery-grid    { columns:3; }
  .nexo-blog-grid       { grid-template-columns:repeat(2,1fr); }
  .nexo-post-featured   { grid-column:auto; }
  .nexo-post-featured .nexo-card { grid-template-columns:1fr; }
  .nexo-testimonials-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:767px){
  .nexo-stats-bar__grid { grid-template-columns:repeat(2,1fr); }
  .nexo-features__grid  { grid-template-columns:1fr 1fr; }
  .nexo-amenities__grid { grid-template-columns:1fr 1fr; }
  .nexo-gallery-grid    { columns:2; }
  .nexo-blog-grid       { grid-template-columns:1fr; }
  .nexo-testimonials-grid { grid-template-columns:1fr; }
  .nexo-contact-grid    { grid-template-columns:1fr; }
  .nexo-form__row       { grid-template-columns:1fr; }
  .nexo-parallax        { background-attachment:scroll; }
}
@media(max-width:480px){
  .nexo-gallery-grid { columns:1; }
  .nexo-features__grid,.nexo-amenities__grid { grid-template-columns:1fr; }
}