/* ============================================================
   UCG LOCATION PAGES
   ------------------------------------------------------------
   The /location/ hub and the six city pages. Built on the .ucgp
   system in ucg-page.css - this file only adds what that system
   does not already provide: the city grid on the hub, and the
   photo treatment used by the alternating story sections.
   ============================================================ */

/* ---- 1. CITY GRID (hub) ----------------------------------- */
.ucgl-cities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.ucgl-city{
  position:relative;display:block;overflow:hidden;
  border-radius:18px;text-decoration:none;
  background:var(--ucg-navy);
  min-height:260px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.ucgl-city:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(7,28,72,.6)}
.ucgl-city img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.55;transition:transform .5s ease,opacity .3s ease;
}
.ucgl-city:hover img{transform:scale(1.06);opacity:.42}
.ucgl-city .in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px;
  background:linear-gradient(180deg,rgba(7,28,72,0) 30%,rgba(7,28,72,.86) 100%);
  min-height:260px;
}
.ucgl-city h3{
  font-family:'Poppins',sans-serif;font-size:24px;font-weight:600;
  color:#fff !important;margin:0 0 6px;letter-spacing:-.02em;
}
.ucgl-city p{margin:0 0 12px;color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.6}
.ucgl-city .go{color:var(--ucg-orange);font-weight:600;font-size:14.5px;display:inline-flex;gap:8px;align-items:center}
.ucgl-city .go .arw{transition:transform .18s ease}
.ucgl-city:hover .go .arw{transform:translateX(4px)}

/* ---- 2. STORY SECTIONS (city pages) ----------------------- */
.ucgl-figure{margin:0;position:relative}
.ucgl-figure img{
  display:block;width:100%;height:auto;
  border-radius:18px;
  box-shadow:0 26px 56px -34px rgba(7,28,72,.55);
}
.ucgl-figure figcaption{
  margin-top:10px;font-size:13px;color:#7A889F;
}
.ucgp-band--deep .ucgl-figure figcaption{color:rgba(255,255,255,.6)}

.ucgl-copy h2{margin-bottom:14px}
.ucgl-copy p{margin:0 0 1.05em;line-height:1.78}
.ucgl-copy p:last-child{margin-bottom:0}
.ucgl-copy ul{list-style:none;margin:0 0 1.2em;padding:0}
.ucgl-copy ul li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.7}
.ucgl-copy ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--ucg-orange);
}

/* ---- 3. SERVICE TILES ------------------------------------- */
.ucgl-svcs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
}
.ucgl-svc{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid rgba(7,28,72,.10);
  border-radius:18px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ucgl-svc:hover{transform:translateY(-3px);border-color:rgba(249,113,4,.45);
  box-shadow:0 18px 40px -26px rgba(7,28,72,.45)}
.ucgl-svc img{display:block;width:100%;height:190px;object-fit:cover}
.ucgl-svc .b{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.ucgl-svc h3{
  font-family:'Poppins',sans-serif;font-size:19px;font-weight:600;
  color:var(--ucg-navy) !important;margin:0;letter-spacing:-.02em;
}
.ucgl-svc p{margin:0;color:#41506B;font-size:15px;line-height:1.65}
.ucgl-svc .go{margin-top:auto;color:var(--ucg-orange);font-weight:600;font-size:14.5px}

/* ---- 4. QUICK FACTS --------------------------------------- */
.ucgl-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;margin-top:28px;
}
.ucgl-fact{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:20px;
}
.ucgl-fact .l{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ucg-orange);margin-bottom:6px;
}
.ucgl-fact .v{color:#fff;font-weight:600;font-size:16px;line-height:1.4}

/* ---- 5. MOBILE -------------------------------------------- */
@media (max-width:900px){
  .ucgp-split.ucgl-split{grid-template-columns:1fr;gap:26px}
  .ucgp-split.ucgl-split .ucgl-figure{order:-1}
}
@media (max-width:767px){
  .ucgl-city,.ucgl-city .in{min-height:210px}
  .ucgl-city h3{font-size:21px}
  .ucgl-svc img{height:170px}
  .ucgl-facts{gap:12px}
}


/* ---- 6. BODY COPY COLOUR ----------------------------------
   ucg-page.css sets .ucgp{color:#fff} for the dark base, then
   repaints text on cream bands with '.ucgp-band--cream p,li'.
   Some of the original copy was pasted into Elementor without a
   wrapping <p> - the first paragraph of "History of Honolulu" is
   a bare text node - so those selectors never reached it and it
   stayed white on cream, i.e. invisible. Colour the container
   itself so loose text is covered too, not just tagged elements. */
.ucgp-band--cream .ucgl-copy,
.ucgp-band--cream .ucgl-copy p,
.ucgp-band--cream .ucgl-copy li,
.ucgp-band--cream .ucgl-copy span{
  color:#2F2A24;
}
.ucgp-band--cream .ucgl-copy a{
  color:#A8480B;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(249,113,4,.4);
}
.ucgp-band--cream .ucgl-copy a:hover{border-bottom-color:var(--ucg-orange)}
.ucgp-band--cream .ucgl-copy strong{color:var(--ucg-navy);font-weight:600}

/* same guard on the dark bands, in case a story section is moved there */
.ucgp-band--deep .ucgl-copy,
.ucgp-band--deep .ucgl-copy p,
.ucgp-band--deep .ucgl-copy li{color:rgba(255,255,255,.82)}

/* ---- 7. SECTION RHYTHM -------------------------------------
   The four story sections are consecutive cream bands. Each one
   carried the full band padding (up to 110px top AND bottom) plus
   a 2px orange border on both edges, so between two sections you
   got ~220px of empty space and a doubled rule. Tighten the
   padding and drop the repeated border where they meet. */
.ucgp-location .ucgp-band{padding:clamp(40px,4vw,66px) 0}
.ucgp-location .ucgp-band--cream + .ucgp-band--cream{border-top:0}
.ucgp-location .ucgp-hero + .ucgp-band--cream{border-top:0}

@media (max-width:767px){
  .ucgp-location .ucgp-band{padding:clamp(30px,6vw,44px) 0}
}