/* Our Story page — loaded only on /our-story via asset_url. See templates/our-story.liquid. */

.azi-story-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:stretch; background:#F4F6F9; }
.azi-story-hero-content { display:flex; flex-direction:column; gap:20px; justify-content:center; padding:clamp(40px,6vw,96px) clamp(20px,4.5vw,72px); }
.azi-story-breadcrumb { display:flex; align-items:center; gap:9px; font-size:12.5px; color:#5B6578; }
.azi-story-breadcrumb-current { color:#B5852F; }
.azi-story-hero-content h1 { margin:0; font-size:clamp(38px,5vw,66px); line-height:1.04; font-weight:700; letter-spacing:-0.022em; text-wrap:pretty; }
.azi-story-hero-lead { margin:0; max-width:520px; font-size:18px; line-height:1.65; color:#475269; }
.azi-story-hero-media { position:relative; min-height:clamp(300px,42vw,560px); overflow:hidden; }
.azi-story-hero-media .azi-parallax-layer { position:absolute; left:0; right:0; top:-14%; bottom:-14%; background-size:cover; background-position:center; will-change:transform; }

.azi-story-who { max-width:1400px; margin:0 auto; padding:clamp(52px,7vw,104px) clamp(20px,4.5vw,72px); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,80px); align-items:start; }
.azi-story-who-aside { display:flex; flex-direction:column; gap:14px; position:sticky; top:110px; }
.azi-story-pullquote { margin:0; font-family:'Instrument Serif', serif; font-size:clamp(28px,3.2vw,40px); line-height:1.2; color:#16233F; text-wrap:pretty; }
.azi-story-who-body { display:flex; flex-direction:column; gap:22px; }
.azi-story-who-body p { margin:0; font-size:17px; line-height:1.75; color:#2B364C; }
.azi-story-fact-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:8px; }
.azi-story-fact-tile { display:flex; flex-direction:column; gap:6px; padding:18px; background:#F4F6F9; border-radius:6px; }
.azi-story-fact-tile-label { font-size:11px; font-weight:700; letter-spacing:0.14em; color:#5B6578; }
.azi-story-fact-tile-value { font-size:22px; font-weight:700; color:#16233F; }
.azi-story-fact-tile-dark { background:#16233F; }
.azi-story-fact-tile-dark .azi-story-fact-tile-label { color:#E4C99A; }
.azi-story-fact-tile-dark .azi-story-fact-tile-value { font-size:18px; color:#ffffff; line-height:1.25; }

.azi-story-approach { background:#F4F6F9; padding:clamp(52px,7vw,100px) clamp(20px,4.5vw,72px); }
.azi-story-approach-inner { max-width:1400px; margin:0 auto; display:flex; flex-direction:column; gap:32px; }
.azi-story-approach-head { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.azi-story-approach-head h2 { margin:0; font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-0.015em; }
.azi-story-approach-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.azi-story-approach-card { display:flex; flex-direction:column; gap:12px; padding:28px; background:#ffffff; border-radius:8px; }
.azi-story-approach-number { font-family:'Instrument Serif', serif; font-style:italic; font-size:34px; line-height:1; color:#B5852F; }
.azi-story-approach-content { display:flex; flex-direction:column; gap:12px; }
.azi-story-approach-content h3 { margin:0; font-size:20px; font-weight:700; }
.azi-story-approach-content p { margin:0; font-size:15px; line-height:1.65; color:#5B6578; }

.azi-story-destinations { max-width:1400px; margin:0 auto; padding:clamp(52px,7vw,100px) clamp(20px,4.5vw,72px); display:flex; flex-direction:column; gap:30px; }
.azi-story-destinations-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.azi-story-destinations-head h2 { margin:6px 0 0; font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-0.015em; }
.azi-story-destinations-lead { margin:10px 0 0; max-width:640px; font-size:15.5px; line-height:1.65; color:#5B6578; }
.azi-story-all-tours { font-size:14.5px; font-weight:600; color:#B5852F; }
.azi-story-destination-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.azi-story-destination-tile { position:relative; display:flex; align-items:flex-end; height:300px; border-radius:8px; overflow:hidden; background-size:cover; background-position:center; transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1); }
.azi-story-destination-tile:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(16,26,46,0.16); }
.azi-story-destination-tile-content { display:flex; flex-direction:column; gap:4px; padding:22px; color:#ffffff; }
.azi-story-destination-tile-name { font-size:22px; font-weight:700; }
.azi-story-destination-tile-when { font-size:13px; color:rgba(255,255,255,0.84); }

.azi-story-closing { position:relative; overflow:hidden; background:#16233F; padding:clamp(60px,8vw,120px) clamp(20px,4.5vw,72px); }
.azi-story-closing-inner { max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.azi-story-closing-inner h2 { margin:0; font-size:clamp(32px,4.4vw,58px); line-height:1.08; font-weight:700; letter-spacing:-0.02em; color:#ffffff; text-wrap:balance; }
.azi-story-closing-inner p { margin:0; max-width:640px; font-size:17.5px; line-height:1.7; color:rgba(255,255,255,0.84); }
.azi-story-closing-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.azi-story-btn-white { padding:15px 26px; background:#ffffff; color:#16233F; border-radius:4px; font-weight:600; font-size:15px; text-decoration:none; transition:background .3s ease; }
.azi-story-btn-white:hover { background:#E4C99A; color:#16233F; }
.azi-story-btn-ghost { padding:15px 26px; border:1px solid rgba(255,255,255,0.5); color:#ffffff; border-radius:4px; font-weight:600; font-size:15px; text-decoration:none; transition:border-color .3s ease; }
.azi-story-btn-ghost:hover { border-color:#ffffff; color:#ffffff; }

@media (max-width:860px) {
  .azi-story-hero { display:flex; flex-direction:column; }
  .azi-story-hero-media { order:-1; min-height:260px; height:260px; }
  .azi-story-hero-media .azi-parallax-layer { inset:0; transform:none !important; }
  .azi-story-hero-content { padding:26px 20px 30px; gap:14px; }
  .azi-story-hero-content h1 { font-size:36px; line-height:1.06; }
  .azi-story-hero-lead { font-size:16px; line-height:1.6; }

  .azi-story-who { padding:32px 20px; gap:18px; }
  .azi-story-who-aside { position:static; gap:12px; }
  .azi-story-pullquote { padding-left:16px; border-left:2px solid #B5852F; font-size:26px; line-height:1.22; }
  .azi-story-who-body { gap:18px; }
  .azi-story-who-body p { font-size:15.5px; line-height:1.7; }
  .azi-story-fact-tiles { grid-template-columns:1fr 1fr; gap:10px; }
  .azi-story-fact-tile { padding:15px; }
  .azi-story-fact-tile-value { font-size:18px; }
  .azi-story-fact-tile-label { font-size:10px; }
  .azi-story-fact-tile-dark { grid-column:1/-1; }

  .azi-story-approach { padding:32px 20px; }
  .azi-story-approach-inner { gap:18px; }
  .azi-story-approach-head h2 { font-size:27px; }
  .azi-story-approach-grid { grid-template-columns:1fr; gap:12px; }
  .azi-story-approach-card { flex-direction:row; gap:16px; padding:20px; }
  .azi-story-approach-number { font-size:28px; }
  .azi-story-approach-content h3 { font-size:17px; }
  .azi-story-approach-content p { font-size:14px; }

  .azi-story-destinations { padding:32px 0; gap:18px; }
  .azi-story-destinations-head { padding:0 20px; }
  .azi-story-destinations-head h2 { font-size:27px; }
  .azi-story-destinations-lead { font-size:14.5px; }
  .azi-story-destination-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:4px 20px; scrollbar-width:none; }
  .azi-story-destination-grid::-webkit-scrollbar { display:none; }
  .azi-story-destination-tile { flex:0 0 220px; height:260px; scroll-snap-align:center; }
  .azi-story-all-tours { padding:0 20px; }

  .azi-story-closing { padding:46px 20px; }
  .azi-story-closing-inner h2 { font-size:30px; line-height:1.1; }
  .azi-story-closing-inner p { font-size:15.5px; line-height:1.65; }
  .azi-story-closing-actions { flex-direction:column; align-items:stretch; width:100%; }
}