/* =========================================================
   GLOBAL TOKENS
   ========================================================= */
:root{
  --ld-fill-alpha: 0.25;         /* header fill alpha */
  --ld-blur: 16px;               /* header blur px */
  --ld-overlay-height: 100%;     /* header overlay height (e.g. 500px) */

  --tiles-gap: 0px;              /* portfolio gaps */
  --tile-radius: 12px;           /* tile corner radius */
}

/* =========================================================
   HEADER (fixed, transparent) + SCROLLED FILL & BLUR
   ========================================================= */
body:not(.wp-admin) .wp-block-template-part.header-transparent{
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100vw; margin: 0 !important; padding: 0 !important;
  z-index: 9999; isolation: isolate; background: transparent !important; background-image: none !important;
}
body.admin-bar:not(.wp-admin) .wp-block-template-part.header-transparent{
  top: var(--wp-admin--admin-bar--height, 32px);
}
body:not(.wp-admin) .wp-block-template-part.header-transparent .header-row{
  position: relative; z-index: 3; width: 100%; padding-inline: clamp(12px, 2vw, 24px);
  background: transparent !important;
}
body:not(.wp-admin) .wp-block-template-part.header-transparent::before,
body:not(.wp-admin) .wp-block-template-part.header-transparent::after{
  content:""; position:absolute; top:0; left:0; right:0; height: var(--ld-overlay-height);
  pointer-events:none; opacity:0;
}
body:not(.wp-admin) .wp-block-template-part.header-transparent::before{
  z-index:1; background: rgba(0,0,0,var(--ld-fill-alpha));
  transition: opacity .75s ease;
}
body:not(.wp-admin) .wp-block-template-part.header-transparent::after{
  z-index:2; backdrop-filter: saturate(140%) blur(var(--ld-blur));
  -webkit-backdrop-filter: saturate(140%) blur(var(--ld-blur));
  transition: opacity .25s ease;
}
body:not(.wp-admin) .wp-block-template-part.header-transparent.is-blurred::before,
body:not(.wp-admin) .wp-block-template-part.header-transparent.is-blurred::after{ opacity: 1; }

/* Nav hover */
body:not(.wp-admin) .wp-block-template-part.header-transparent .wp-block-navigation a:where(:not(.wp-element-button)){
  text-decoration: none; transition: color .25s ease;
}
body:not(.wp-admin) .wp-block-template-part.header-transparent .wp-block-navigation a:hover,
body:not(.wp-admin) .wp-block-template-part.header-transparent .wp-block-navigation .wp-block-navigation-item__label:hover,
body:not(.wp-admin) .wp-block-template-part.header-transparent .wp-block-navigation__submenu-container a:hover,
body:not(.wp-admin) .wp-block-template-part.header-transparent .wp-block-navigation__responsive-container a:hover{
  color: var(--wp--preset--color--brand, #8adaff) !important;
}

/* =========================================================
   SERVICES GRID (kept minimal)
   ========================================================= */
body:not(.wp-admin) .Main_Group{ position:relative; overflow:hidden; }
body:not(.wp-admin) .Group_Video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
body:not(.wp-admin) .Group_Video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .4s ease; pointer-events:none;
}
body:not(.wp-admin) .Group_Video video.active{ opacity:1; }
body:not(.wp-admin) .Group_Video video.apply-blur{ filter: blur(3px); }
body:not(.wp-admin) .Columns{ position:relative; z-index:1; }
@media (max-width:900px){ body:not(.wp-admin) .service-tile{ height:240px; } }

/* =========================================================
   PORTFOLIO GRID (Cover IS the tile)
   ========================================================= */
body:not(.wp-admin) .portfolio-grid{
  --wp--style--block-gap: 0 !important;
  display:grid; grid-auto-flow:dense;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--tiles-gap);
}
body:not(.wp-admin) .portfolio-grid > *{ margin:0 !important; }

/* Tile core (Cover) */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 6 / 5 !important;    /* base ratio */
  min-height: 0 !important; height: auto !important;
  overflow: hidden; isolation: isolate;
  border-radius: var(--tile-radius);
}
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile.tile--wide{
  grid-column: span 2;
  aspect-ratio: 12 / 5 !important;   /* 2:1 */
}

/* Media fills tile; scales on hover */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile .wp-block-cover__image-background,
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile img,
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile video{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; transform: scale(1); transition: transform .35s ease; z-index:1;
}
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile:hover .wp-block-cover__image-background,
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile:hover img,
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile:hover video{ transform: scale(1.06); }

/* Native WP full-tile overlay link (preferred when you use “Link” control) */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile .wp-block-cover__link{
  position:absolute; inset:0; z-index:4; display:block; background:transparent; pointer-events:auto;
  text-indent:-9999px;
}

/* Fallback: custom hidden link as direct child of .wp-block-cover.tile */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile > .tile-link{
  position:absolute; inset:0; z-index:4; display:block;
  text-indent:-9999px; overflow:hidden; font-size:0; color:transparent; background:transparent; border:0;
}

/* Content layer above clickable overlay */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile .wp-block-cover__inner-container{
  position:relative; z-index:5; padding: 12px;
}

/* Reveal-on-hover text (apply class to Heading/Paragraph) */
.reveal-on-hover{ opacity:0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile:is(:hover, :focus-within) .reveal-on-hover{
  opacity:1; transform: translateY(0);
}

/* Responsive columns */
@media (max-width:1024px){
  body:not(.wp-admin) .portfolio-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile.tile--wide{ grid-column: span 2; }
}
@media (max-width:640px){
  body:not(.wp-admin) .portfolio-grid{ grid-template-columns: 1fr; }
  body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile.tile--wide{ grid-column: span 1; aspect-ratio: 6 / 5 !important; }
}

/* Cursor + focus ring for accessibility */
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile{ cursor: pointer; }
body:not(.wp-admin) .portfolio-grid > .wp-block-cover.tile:focus-within{ outline: 2px solid #fff; outline-offset: 4px; }

/* =========================================================
   GENERIC TILE (Image/Group alternative) — keep if you use non-Cover tiles
   ========================================================= */
.tile{ position:relative; overflow:hidden; isolation:isolate; border-radius: var(--tile-radius); cursor:pointer; aspect-ratio:1/1; background:#0a0a0a; }
.tile.tile--wide{ aspect-ratio:2/1; }
.tile .tile__media{ position:absolute; inset:0; }
.tile .tile__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition: transform .45s ease; }
.tile:hover .tile__media img{ transform:scale(1.06); }
.tile .tile__overlay{
  position:absolute; inset:0; display:grid; align-content:end; gap:.5rem;
  padding:1.25rem; color:#fff; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
  opacity:0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.tile:hover .tile__overlay{ opacity:1; transform: translateY(0); }
/* Full-tile link for generic tile */
.tile.is-link > .tile-link{ position:absolute; inset:0; z-index:4; display:block; text-indent:-9999px; overflow:hidden; }
.tile.is-link a:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* =========================================================
   STAIR CENTER (hero text centering helpers)
   ========================================================= */
.wp-block-cover .wp-block-cover__inner-container{ width:100%; max-width:none !important; }
.stair-center{
  display:block; margin-inline:auto; text-align:center !important;
  inline-size:min(90ch, 92vw);
}

/* =========================================================
   HEADING EFFECTS
   ========================================================= */
/* Soft text shadow */
.h-soft, .is-style-h-soft{
  text-shadow: 0 .04em .06em rgba(0,0,0,.18), 0 .18em .6em rgba(0,0,0,.22);
}
.h-soft--light{ text-shadow: 0 .04em .08em rgba(0,0,0,.14); }
.h-soft--strong{
  text-shadow: 0 .05em .08em rgba(0,0,0,.25), 0 .22em .75em rgba(0,0,0,.28);
}

/* Gradient text (optional) */
.shadowgrad, .is-style-shadowgrad{
  --cut: 75%; --fade: 15%;
  background: linear-gradient(160deg, #fff 0%, #fff var(--cut), #b6cde3 calc(var(--cut) + var(--fade)), #b6cde3 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  -text-shadow: 0 .04em .06em rgba(0,0,0,.18), 0 .18em .6em rgba(0,0,0,.22); /* soft shadow pairs well */
}