/* =============================================================================
   AdriaGo — Sections
   Page/section layout. Homepage sections live here (Phase 3); archive/single
   template sections are appended by their own files (loaded via @import below so
   parallel template phases never share one file). Token-only, editorial.
   ========================================================================== */
@import "sections/templates-transfers.css";
@import "sections/templates-route.css";
@import "sections/templates-excursions.css";
@import "sections/templates-pages.css";
@import "sections/templates-system.css";

/* -------------------------------------------------------------------------- */
/*  Shared section utilities                                                   */
/* -------------------------------------------------------------------------- */
.section-head-row{
	display:flex;align-items:flex-end;justify-content:space-between;
	gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-7);
}
.section-head-row .section-header{margin-bottom:0}
.section-head-row__cta{flex:none}

.link-arrow{
	display:inline-flex;align-items:center;gap:var(--sp-2);
	font-weight:600;color:var(--adria-orange);
}
.link-arrow .icon{transition:transform var(--dur-fast) var(--ease-out-soft)}
.link-arrow:hover .icon,.link-arrow:focus-visible .icon{transform:translateX(4px)}
.btn .icon{transition:transform var(--dur-fast) var(--ease-out-soft)}
.btn:hover .icon{transform:translateX(3px)}

/* =============================================================================
   HERO
   ========================================================================== */
.hero{
	position:relative;isolation:isolate;overflow:hidden;
	padding-top:calc(var(--header-h) + var(--sp-8));
	padding-bottom:var(--sp-9);
	background:var(--grad-dark);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media .img,.hero__media .img__media,.hero__img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero__media::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.hero__media--fallback{background:var(--grad-dark)}
.hero__media--fallback::before{content:"";position:absolute;inset:0;background:var(--grad-glow)}

.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp-7);max-width:var(--container)}
.hero__copy{max-width:46rem}
.hero__eyebrow{color:var(--adria-orange);margin-bottom:var(--sp-4)}
.hero__title{color:var(--text-on-dark-strong);max-width:18ch}
.hero__sub{margin-top:var(--sp-5);color:var(--warm-gray);max-width:48ch}
.hero__calc{width:100%}
.hero__badges{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;padding:0}

@media (min-width:1024px){
	.hero{padding-top:calc(var(--header-h) + var(--sp-9))}
	.hero__copy{max-width:52rem}
}

/* =============================================================================
   SERVICES
   ========================================================================== */
.services__grid{display:grid;gap:var(--gutter);grid-template-columns:1fr}
.service-card{
	display:flex;flex-direction:column;gap:var(--sp-3);
	padding:var(--sp-6);background:var(--white);border:1.5px solid var(--border);
	border-radius:var(--r-lg);transition:transform var(--dur-fast) var(--ease-out-soft),border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.service-card:hover{transform:translateY(-4px);border-color:var(--adria-orange);box-shadow:var(--shadow-md)}
.service-card__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:3rem;height:3rem;border-radius:var(--r-md);
	background:var(--orange-tint);color:var(--adria-orange);margin-bottom:var(--sp-2);
}
.service-card__icon .icon{width:1.5rem;height:1.5rem}
.service-card__title{font-size:var(--fs-h3)}
.service-card__desc{color:var(--text-muted);flex:1}
.service-card__link{margin-top:var(--sp-2)}

@media (min-width:760px){
	.services__grid{grid-template-columns:1fr 1fr}
	.service-card--lead{grid-column:1 / -1;flex-direction:row;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
	.service-card--lead .service-card__icon{width:3.5rem;height:3.5rem;margin-bottom:0}
	.service-card--lead .service-card__title{flex-basis:100%;font-size:var(--fs-h2)}
	.service-card--lead .service-card__desc{flex:1 1 320px}
}

/* =============================================================================
   POPULAR ROUTES / EXCURSIONS grids inherit .grid utilities
   ========================================================================== */
.routes__grid,.excursions__grid{margin-top:var(--sp-2)}

/* =============================================================================
   WHY US
   ========================================================================== */
.why-us__inner{display:grid;gap:var(--sp-7);grid-template-columns:1fr}
.why-us__list{display:grid;gap:var(--sp-4);grid-template-columns:1fr;margin:0;padding:0}
.why-point{
	display:flex;align-items:center;gap:var(--sp-4);
	padding:var(--sp-4) var(--sp-5);background:var(--white);
	border:1px solid var(--border);border-radius:var(--r-md);
}
.why-point__icon{
	display:inline-flex;flex:none;align-items:center;justify-content:center;
	width:2.5rem;height:2.5rem;border-radius:var(--r-pill);
	background:var(--orange-tint);color:var(--adria-orange);
}
.why-point__label{font-weight:500}

@media (min-width:860px){
	.why-us__inner{grid-template-columns:0.8fr 1.2fr;align-items:start;gap:var(--sp-9)}
	.why-us__list{grid-template-columns:1fr 1fr}
}

/* =============================================================================
   HOW IT WORKS
   ========================================================================== */
.how__steps{
	position:relative;display:grid;gap:var(--sp-6);
	grid-template-columns:1fr;counter-reset:step;margin:var(--sp-7) 0 0;padding:0;list-style:none;
}
.how-step{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.how-step__num{
	display:inline-flex;align-items:center;justify-content:center;
	width:2.25rem;height:2.25rem;border-radius:var(--r-pill);
	background:var(--deep-black);color:var(--white);font-family:var(--font-display);font-weight:700;
}
.how-step__icon{display:inline-flex;color:var(--adria-orange);margin-top:var(--sp-2)}
.how-step__icon .icon{width:2rem;height:2rem}
.how-step__title{font-size:var(--fs-h3)}
.how-step__desc{color:var(--text-muted);max-width:34ch}

@media (min-width:760px){
	.how__steps{grid-template-columns:repeat(3,1fr)}
	/* Connecting route line behind the step numbers. */
	.how__steps::before{
		content:"";position:absolute;top:1.125rem;left:16%;right:16%;height:2px;
		background:repeating-linear-gradient(90deg,var(--warm-gray) 0 8px,transparent 8px 16px);z-index:0;
	}
	.how-step__num{position:relative;z-index:1}
}

/* =============================================================================
   FLEET TEASER inherits .grid
   ========================================================================== */
.fleet__grid{margin-top:var(--sp-2)}

/* =============================================================================
   HOME FAQ
   ========================================================================== */
.home-faq__inner{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
.home-faq__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.home-faq__list{max-width:var(--container-narrow)}

@media (min-width:860px){
	.home-faq__inner{grid-template-columns:1fr;max-width:var(--container-narrow);margin-inline:auto}
}

/* =============================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{text-align:center}
.final-cta__inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.final-cta__title{color:var(--text-on-dark-strong);max-width:18ch}
.final-cta__text{color:var(--warm-gray);max-width:52ch}
.final-cta__actions{justify-content:center;margin-top:var(--sp-3)}