/* ==========================================================================
   PAGE-SPECIFIC LAYOUTS — Explore Watamu Tours
   Loaded after style.css. Tour detail, about, contact, blog, destinations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOUR DETAIL PAGE
   -------------------------------------------------------------------------- */
.tour-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--space-xl);align-items:start}
@media (max-width:1080px){.tour-layout{grid-template-columns:1fr}}

.tour-gallery{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:.7rem;border-radius:var(--radius-lg);overflow:hidden;height:clamp(320px,52vw,540px)}
.tour-gallery a{position:relative;overflow:hidden;display:block}
.tour-gallery a:first-child{grid-row:1/3}
.tour-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.tour-gallery a:hover img{transform:scale(1.06)}
.tour-gallery .more-overlay{position:absolute;inset:0;background:rgba(8,17,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);font-size:1.1rem}
@media (max-width:640px){.tour-gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .tour-gallery a{aspect-ratio:4/3}.tour-gallery a:first-child{grid-row:auto}
  .tour-gallery a:nth-child(n+4){display:none}
}

.tour-quickfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-lg)}
.tour-quickfacts div{background:var(--white);padding:1.1rem 1rem;text-align:center}
.tour-quickfacts .qf-label{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500)}
.tour-quickfacts .qf-value{display:block;font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:1.02rem;margin-top:.3rem}
.tour-quickfacts svg{width:22px;height:22px;color:var(--gold-600)}
@media (max-width:700px){.tour-quickfacts{grid-template-columns:repeat(2,1fr)}}

.tour-tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--color-border);margin:var(--space-xl) 0 var(--space-lg);overflow-x:auto}
.tour-tab-btn{padding:.9rem 1.4rem;font-weight:600;font-size:.92rem;color:var(--ink-600);white-space:nowrap;position:relative;top:2px;border-bottom:2px solid transparent}
.tour-tab-btn.is-active{color:var(--navy-900);border-color:var(--gold-500)}
.tour-tab-panel{display:none}
.tour-tab-panel.is-active{display:block;animation:fadeIn .4s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
@media (max-width:640px){.incl-grid{grid-template-columns:1fr}}
.incl-grid ul{display:flex;flex-direction:column;gap:.3rem}

.booking-card{
  position:sticky;top:calc(var(--header-h) + 1.5rem);background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);border:1px solid var(--color-border);overflow:hidden;
}
.booking-card-head{background:linear-gradient(135deg,var(--navy-950),var(--teal-700));color:#fff;padding:var(--space-md) var(--space-md) var(--space-lg)}
.booking-card-head .from{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.booking-card-head .amount{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--gold-400)}
.booking-card-head .per{font-size:.85rem;opacity:.8}
.booking-card-body{padding:var(--space-md)}
.booking-trust{display:flex;flex-direction:column;gap:.6rem;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}
.booking-trust .badge-check{font-size:.82rem}

.related-tours{margin-top:var(--space-2xl)}

.itinerary-day-image{border-radius:var(--radius-md);overflow:hidden;margin-top:.8rem;max-width:420px}

/* --------------------------------------------------------------------------
   TOURS LISTING
   -------------------------------------------------------------------------- */
.tours-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:var(--space-lg)}
.results-count{font-size:.9rem;color:var(--color-text-muted)}

/* --------------------------------------------------------------------------
   ABOUT PAGE
   -------------------------------------------------------------------------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
@media (max-width:900px){.about-split{grid-template-columns:1fr}}
.about-media{position:relative}
.about-media .main-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.about-media .main-img img{width:100%;height:100%;object-fit:cover}
.about-media .float-img{position:absolute;width:46%;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid var(--sand-50)}
.about-media .float-img img{width:100%;height:100%;object-fit:cover}
.about-media .float-img.pos-br{bottom:-10%;right:-12%}
@media (max-width:560px){.about-media .float-img{display:none}}
.about-media .float-badge{
  position:absolute;top:-1.2rem;left:-1.2rem;background:var(--gold-500);color:var(--navy-950);width:110px;height:110px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-family:var(--font-display);font-weight:700;
  box-shadow:var(--shadow-gold);animation:spinSlow 20s linear infinite;
}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.about-media .float-badge span{font-size:1.5rem;line-height:1}
.about-media .float-badge small{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-body);font-weight:700}

.value-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
@media (max-width:900px){.value-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.value-row{grid-template-columns:1fr}}

.team-card{text-align:center}
.team-card .team-photo{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-sm)}
.team-card .team-photo img{width:100%;height:100%;object-fit:cover}
.team-card h4{margin-bottom:.15rem}
.team-card span{color:var(--teal-600);font-size:.85rem;font-weight:600}

.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);counter-reset:step}
@media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process-steps{grid-template-columns:1fr}}
.process-step{position:relative;padding-top:2.2rem}
.process-step::before{
  counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:2.6rem;font-weight:700;
  color:transparent;-webkit-text-stroke:1.5px var(--gold-400);position:absolute;top:-1.2rem;left:0;
}

/* --------------------------------------------------------------------------
   CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-xl)}
@media (max-width:960px){.contact-layout{grid-template-columns:1fr}}
.contact-info-card{background:var(--navy-950);color:#fff;border-radius:var(--radius-lg);padding:var(--space-lg);position:relative;overflow:hidden}
.contact-info-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%, rgba(217,169,79,.25), transparent 50%)}
.contact-info-card ul{display:flex;flex-direction:column;gap:1.3rem;position:relative;z-index:1;margin-top:var(--space-md)}
.contact-info-card li{display:flex;gap:1rem;align-items:flex-start}
.contact-info-card .ci-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-card .ci-icon svg{width:20px;height:20px;color:var(--gold-400)}
.contact-info-card strong{display:block;margin-bottom:.2rem}
.contact-info-card span,.contact-info-card a{color:rgba(255,255,255,.72);font-size:.92rem}
.contact-info-card a:hover{color:var(--gold-400)}

.contact-form-card{background:var(--white);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}

/* --------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */
.blog-post-body{max-width:760px;margin-inline:auto}
.blog-post-body h2{margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.blog-post-body h3{margin-top:var(--space-md);margin-bottom:.5rem}
.blog-post-body p{margin-bottom:1.1rem;color:var(--ink-800);font-size:1.02rem;line-height:1.85}
.blog-post-body img{border-radius:var(--radius-lg);margin-block:var(--space-md)}
.blog-post-body ul{margin-bottom:1.1rem;padding-left:1.4rem;list-style:disc;color:var(--ink-800)}
.blog-post-body blockquote{
  border-left:4px solid var(--gold-500);padding:.5rem 0 .5rem 1.4rem;font-style:italic;color:var(--navy-800);font-family:var(--font-display);font-size:1.2rem;margin-block:var(--space-md);
}
.post-hero-meta{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;color:rgba(255,255,255,.8);font-size:.88rem;margin-top:var(--space-sm)}
.post-share{display:flex;gap:.6rem;align-items:center}
.post-share a{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--color-border);display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast)}
.post-share a:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.post-share svg{width:17px;height:17px}
.author-box{display:flex;gap:1rem;align-items:center;background:var(--sand-100);border-radius:var(--radius-lg);padding:var(--space-md);margin-top:var(--space-xl)}
.author-box .avatar-lg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--teal-500),var(--navy-800));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.4rem;flex-shrink:0}

/* --------------------------------------------------------------------------
   DESTINATIONS
   -------------------------------------------------------------------------- */
.dest-detail-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
@media (max-width:900px){.dest-detail-row{grid-template-columns:1fr}}
.dest-detail-row.reverse .dest-detail-media{order:2}
@media (max-width:900px){.dest-detail-row.reverse .dest-detail-media{order:0}}
.dest-detail-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.dest-detail-media img{width:100%;height:100%;object-fit:cover}
.dest-tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--space-sm) 0 var(--space-md)}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error-page{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:var(--header-h)}
.error-code{font-family:var(--font-display);font-size:clamp(6rem,18vw,11rem);font-weight:800;line-height:1;background:linear-gradient(135deg,var(--gold-600),var(--teal-500));-webkit-background-clip:text;background-clip:text;color:transparent}