/* Phase 4: homepage hero slider, search bar, why-us video banner, and
   subdivisions image grid. New component classes only — does not touch
   selectors already defined in oic-home.css or in the homepage's own
   inline <style> block, so there is no cascade fight with those files. */

.oic-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== hero slider (7 slides, CSS-only crossfade) ===== */
.oic-hero-slide{
  position:absolute; inset:0; opacity:0;
  animation:oic-hero-cycle 28s infinite;
}
.oic-hero-slide__link{
  position:absolute; inset:0; display:flex; align-items:flex-end;
}
.oic-hero-slide__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.oic-hero-slide__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(4,16,24,.94) 0%, rgba(4,16,24,.55) 42%, rgba(4,16,24,.18) 68%, rgba(4,16,24,.4) 100%),
    linear-gradient(90deg, rgba(4,16,24,.5) 0%, rgba(4,16,24,0) 45%);
}
.oic-hero-slide__copy{ position:relative; z-index:2; padding-block:clamp(3rem,8vw,5.5rem); max-width:820px; }
.oic-hero-slide__kicker{
  color:var(--oic-white); opacity:.85; padding-left:1rem; border-left:2px solid var(--oic-gold);
  margin:0 0 1rem; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.oic-hero-slide__place{
  font-family:var(--oic-serif); color:var(--oic-white); font-size:clamp(3.4rem,8.6vw,7.2rem);
  font-weight:500; line-height:.98; letter-spacing:-.01em; margin:0 0 .5rem; max-width:14ch;
  text-shadow:0 4px 30px rgba(4,16,24,.45);
}
.oic-hero-slide__tagline{
  font-size:clamp(1.05rem,1.7vw,1.32rem); color:var(--oic-white); opacity:.92;
  margin:0 0 1.6rem; max-width:38ch; font-weight:400;
}
.oic-hero-slide__cta{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:.2rem;
  color:var(--oic-white); font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--oic-gold); padding-bottom:.35rem;
}

/* ===== header: dedicated scrim so the overlay header stays legible
   regardless of which hero photo is behind it (the shared
   .oic-proof-header is transparent by design — fine over the old flat
   navy hero, not over real photography without its own backing). ===== */
body.page-id-538157 .oic-proof-header{
  background:linear-gradient(180deg, rgba(4,16,24,.82) 0%, rgba(4,16,24,.6) 55%, rgba(4,16,24,0) 100%) !important;
  padding-bottom:0;
}
body.page-id-538157 .oic-proof-nav{
  font-size:.86rem !important; letter-spacing:.1em !important; gap:1.9rem !important;
}
body.page-id-538157 .oic-proof-nav a{ padding-block:.4rem !important; }
@keyframes oic-hero-cycle{
  0%{ opacity:0; }
  1.8%{ opacity:1; }
  12.9%{ opacity:1; }
  14.7%{ opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .oic-hero-slide{ animation:none; opacity:0; }
  .oic-hero-slide:first-child{ opacity:1; }
}

/* ===== search bar strip, directly below the hero ===== */
.oic-hero-search{ background:var(--oic-ivory,#f3f0e8); border-bottom:1px solid rgba(13,31,41,.08); }
.oic-hero-search__bar{
  display:flex; flex-wrap:wrap; align-items:end; gap:1.25rem 1.75rem;
  padding-block:1.6rem;
}
.oic-hero-search__field{ display:flex; flex-direction:column; gap:.35rem; flex:1 1 150px; min-width:130px; }
.oic-hero-search__field label{
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--oic-ink-soft,#3c505c);
}
.oic-hero-search__field select,
.oic-hero-search__field input{
  border:1px solid rgba(13,31,41,.18); border-radius:2px; padding:.65rem .75rem;
  font-size:.92rem; font-family:var(--oic-sans,inherit); background:#fff; color:var(--oic-ink,#0d1f29);
}
.oic-hero-search__bar button{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:820px){
  .oic-hero-search__bar{ flex-direction:column; align-items:stretch; }
  .oic-hero-search__field{ min-width:0; }
}

/* ===== why-us video banner ===== */
.oic-why-video{
  position:relative; overflow:hidden; border-radius:2px; margin-bottom:2.75rem;
  aspect-ratio:21/8; min-height:220px;
}
.oic-why-video video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.oic-why-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,16,24,.75) 0%, rgba(4,16,24,.15) 60%);
}
.oic-why-video span{
  position:absolute; left:1.5rem; bottom:1.25rem; z-index:1;
  color:var(--oic-white); font-family:var(--oic-serif); font-size:1.05rem;
}
@media (max-width:820px){ .oic-why-video{ aspect-ratio:16/10; } }

/* ===== subdivisions page image grid ===== */
.oic-subdivision-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:2rem;
}
.oic-subdivision-grid a{
  position:relative; display:block; aspect-ratio:3/2; overflow:hidden; border-radius:2px; background:#0c2636;
}
.oic-subdivision-grid img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.oic-subdivision-grid a::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,16,24,.82) 0%, rgba(4,16,24,.05) 55%, rgba(4,16,24,0) 80%);
}
.oic-subdivision-grid a:hover img, .oic-subdivision-grid a:focus-visible img{ transform:scale(1.07); }
.oic-subdivision-grid span{
  position:absolute; left:.85rem; right:.85rem; bottom:.8rem; z-index:1;
  color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.01em;
}
@media (max-width:900px){ .oic-subdivision-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .oic-subdivision-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== community grid + lifestyle grid: authoritative overrides =====
   oic-home.css (enqueued earlier) has its own stale copies of both of
   these selectors with different column/row counts, so a bare
   `.oic-community-grid` rule here would depend on cascade source order
   to win. Scoping under the `.oic-home-main` wrapper gives these two
   extra specificity so they win outright, and the lifestyle tiles get
   explicit grid placement instead of relying on auto-placement, which
   has no defined behavior for a 5th item that older breakpoint rules
   elsewhere don't know about. */
/* Widen just this section's shell ~20% so each tile gets ~20% more width
   (tile aspect-ratio was adjusted in the same proportion, in the page's own
   inline stylesheet, so height — and therefore section height — is
   unaffected; only width, and the resulting sense of scale, grows).
   oic-premium-proof.css's base `.oic-shell` sets `width:min(1240px, calc(100%
   - 96px))` — a definite `width`, not `max-width` — so overriding max-width
   alone (as a first attempt did) has no effect; a definite width elsewhere
   wins regardless of specificity on max-width. Override `width` itself,
   using the same min()-with-viewport-fallback shape so it still degrades
   safely on narrow screens. The homepage's OWN inline <style> block (in
   post_content, separate from this file) *also* declares a `.oic-shell`
   with `max-width:var(--oic-shell)` (1280px) — a second, independent
   clamp on top of the `width` fixed above — so that needs overriding too,
   or it silently caps the wider width back down to 1280px regardless.
   The same inline rule also sets `padding-inline:clamp(1.25rem,5vw,3rem)`
   (up to 48px a side, 96px total) on top of this width, which was eating
   most of the intended gain — at a 1440px viewport, `calc(100% - 96px)`
   alone already lands below the 1469px cap, before that padding even
   applies, so the min() cap was never the binding constraint. Narrowing
   the side padding here (instead of fighting the width formula further)
   is what actually recovers the missing space. */
.oic-home-communities .oic-shell{
  width:min(1469px, calc(100% - 40px)); max-width:none; padding-inline:.75rem;
}
.oic-home-main .oic-community-grid{ grid-template-columns:repeat(6,1fr); grid-auto-rows:auto; }
@media (max-width:1024px){ .oic-home-main .oic-community-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:780px){ .oic-home-main .oic-community-grid{ grid-template-columns:repeat(2,1fr); } }
/* oic-home.css (a stale, earlier version of this same section) still sets
   `.oic-community-grid>a{min-height:280px}` with no explicit width. Combined
   with this tile's own `aspect-ratio:4/5`, the browser derives a 224px
   width FROM that stale 280px height instead of stretching to the grid
   track — producing oversized, overlapping tiles. Zeroing min-height here
   lets width come from the grid track as intended, same fix for both the
   community grid and the title card that stands in for one of its tiles. */
.oic-home-main .oic-community-grid a,
.oic-home-main .oic-community-grid__title{ min-height:0; }

/* Section title, folded into the grid as its own top-left tile instead of
   sitting in a separate heading block above it — reuses the same
   text-on-navy treatment as the "All other subdivisions" tile
   (.oic-community-grid__all), just on a <div> instead of an <a> since it
   isn't a link, so it needs its own base tile sizing. */
.oic-community-grid__title{
  position:relative; aspect-ratio:0.967; overflow:hidden; border-radius:2px;
}
.oic-home-main .oic-community-grid__title span{
  position:static; font-family:var(--oic-serif); font-size:1.7rem; line-height:1.15; font-weight:500;
}
.oic-home-main .oic-community-grid__title em{
  position:static; display:block; font-style:normal; margin-top:.85rem; font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oic-gold);
}
@media (max-width:560px){ .oic-home-main .oic-community-grid{ grid-template-columns:1fr; } }

.oic-home-main .oic-lifestyle-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:repeat(2,240px); gap:.6rem;
}
.oic-home-main .oic-lifestyle-grid > a:nth-child(1){ grid-column:1; grid-row:1/3; }
.oic-home-main .oic-lifestyle-grid > a:nth-child(2){ grid-column:2; grid-row:1; }
.oic-home-main .oic-lifestyle-grid > a:nth-child(3){ grid-column:3; grid-row:1; }
.oic-home-main .oic-lifestyle-grid > a:nth-child(4){ grid-column:2; grid-row:2; }
.oic-home-main .oic-lifestyle-grid > a:nth-child(5){ grid-column:3; grid-row:2; }
@media (max-width:1000px){
  .oic-home-main .oic-lifestyle-grid{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,240px); }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(1){ grid-column:1/3; grid-row:1; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(2){ grid-column:1; grid-row:2; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(3){ grid-column:2; grid-row:2; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(4){ grid-column:1; grid-row:3; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(5){ grid-column:2; grid-row:3; }
}
@media (max-width:560px){
  .oic-home-main .oic-lifestyle-grid{ grid-template-columns:1fr; grid-template-rows:repeat(5,260px); }
  .oic-home-main .oic-lifestyle-grid > a{ grid-column:1; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(1){ grid-row:1; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(2){ grid-row:2; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(3){ grid-row:3; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(4){ grid-row:4; }
  .oic-home-main .oic-lifestyle-grid > a:nth-child(5){ grid-row:5; }
}