/* Shared yacht and activity detail layout. Load before page-specific styles. */
/* Base */
:root{
  /* Luxury / lifestyle palette (warm neutrals + deep ocean + soft brass) */
  --bg: #fff;                 /* white */
  --surface: #ffffff;         /* card surface */
  --text: rgba(14, 18, 22, .92);
  --muted: rgba(14, 18, 22, .70);
  --muted2: rgba(14, 18, 22, .58);
  --line: rgba(14, 18, 22, .10);
  --shadow: 0 18px 48px rgba(14, 18, 22, .10);
  --shadow2: 0 10px 26px rgba(14, 18, 22, .08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;

  --navy: #0f2230;            /* deep ocean */
  --navy2:#122b3b;
  --brass:#125294;            /* blue */
}

*{ box-sizing:border-box; }
img{
  display: block;
  max-width: 100%;
  height: auto;
}
html,body{
  margin:0;
  color:var(--text);
  /* Visible luxury gradients (warm sand + ocean shadow + brand pink) */
  background:
    radial-gradient(1200px 760px at 14% -8%, rgba(231,160,179,.26), transparent 62%),
    radial-gradient(1100px 760px at 92% 0%, rgba(15,34,48,.16), transparent 62%),
    radial-gradient(1100px 820px at 18% 112%, rgba(176,141,87,.20), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--bg) 40%, #fff 100%);
  font-family: var(--brand-font-body);
  line-height: 1.55;
}

/* Extra layer to ensure gradients remain visible even on some displays */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 70% 20%, rgba(231,160,179,.16), transparent 60%),
    radial-gradient(900px 560px at 20% 30%, rgba(15,34,48,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(246,241,232,.65) 55%, rgba(255,255,255,.0) 100%);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  border-radius: 10px; background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.35);
  z-index: 9999;
}

.wrap{ max-width: var(--max); margin:0 auto; padding: 0 18px; }

/* Hero */
.hero{
  padding: 16px 0 0;
}

.hero-shell{
  position: relative;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid rgba(14,18,22,.10);
  box-shadow: var(--shadow);
  background: #F7F5F0;
}

.hero-controls{
  position:absolute;
  right: 10px;
  top: 10px;
  display:flex;
  gap: 8px;
  z-index: 3;
}

.iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(14,18,22,.14);
  background: rgba(255,255,255,.85);
  color: var(--navy2);
  cursor: pointer;
  display:grid;
  place-items:center;
  backdrop-filter: blur(8px);
}
.iconbtn:hover{ background: rgba(255,255,255,.98); }

.hero-track{
  display:flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
.hero-track::-webkit-scrollbar{ height: 10px; }
.hero-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.hero-track::-webkit-scrollbar-track{ background: transparent; }

.hero-slide{
  scroll-snap-align: start;
  min-width: 100%;
  height: min(520px, 58vw);
  max-height: 560px;
  padding: 0;
}

.mosaic{
  display:grid;
  height:100%;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

.tile{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f2eb;
  border: 1px solid rgba(14,18,22,.10);
  cursor: zoom-in;
}

.tile.big{ grid-row: 1 / span 2; grid-column: 1; }

.ph-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.01);
}

/* Lightweight placeholder until final images are selected. */
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 320px at 15% 20%, rgba(176,141,87,.14), transparent 60%),
    radial-gradient(520px 280px at 90% 10%, rgba(15,34,48,.08), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  z-index:0;
}
.tile img{ position: relative; z-index: 1; }