/* ══════════════════════════════════════════════════
   AZURE HOLIDAYS — Global Styles
   Shared variables, resets, typography, and components
   ══════════════════════════════════════════════════ */

:root {
  --slate: #0F1923; --slate2: #1A2535; --azure: #1AAFB0; --azure-h: #179FA0;
  --bg: #F9FAFB; --surface: #FFFFFF; --text: #111827; --muted: #6B7280;
  --border: #E5E7EB; --gold: #C9A84C; --r: 16px; --r-sm: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }

/* ── Container System ────────────────────────────── */
.container { width: 100%; max-width: 1436px; margin: 0 auto; padding: 0 48px; }
.sec { padding: 72px 0; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--azure); margin-bottom: 10px; }
.stitle { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 12px; }
.ssub { font-size: 15.5px; color: var(--muted); line-height: 1.6; font-weight: 400; max-width: 500px; }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }

/* ── Global Buttons ──────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 600; padding: 13px 26px; border-radius: 8px; cursor: pointer; transition: all .2s; border: none; }
.btn-p { background: var(--azure); color: #fff; border: 1px solid var(--azure); }
.btn-p:hover { background: var(--azure-h); border-color: var(--azure-h); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(26,175,176,0.3); }
.btn-o { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; backdrop-filter: blur(8px); }
.btn-o:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.8); }
.btn-call { position: relative; overflow: hidden; min-width: 180px; justify-content: center; }
.btn-call-default { transition: all 0.25s ease; display: flex; align-items: center; gap: 8px; }
.btn-call-hover { position: absolute; opacity: 0; transform: translateY(8px); font-size: 13px; letter-spacing: 0.5px; transition: all 0.25s ease; }
.btn-call svg { transition: all 0.25s ease; }
.btn-call:hover svg { opacity: 0; width: 0; margin: 0; }
.btn-call:hover .btn-call-default { opacity: 0; transform: translateY(-8px); }
.btn-call:hover .btn-call-hover { opacity: 1; transform: translateY(0); }
.btn-s { background: transparent; color: var(--text); border: 1.5px solid var(--border); padding: 13px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.btn-s:hover { border-color: var(--azure); color: var(--azure); transform: translateY(-1px); }

/* ── Messenger Strip ──────────────────────────────── */
.mstrip { background: linear-gradient(135deg, #1AAFB0 0%, #0E8A8A 100%); padding: 48px 0; color: #fff; }
.mstrip-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ms-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin: 12px 0 8px; line-height: 1.1; }
.ms-text p { font-size: 16px; color: rgba(255,255,255,0.7); }
.btn-msg { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1AAFB0; font-size: 15px; font-weight: 700; padding: 16px 32px; border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.btn-msg:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb { padding: 14px 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.bc-in { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #9CA3AF; font-weight: 400; flex-wrap: wrap; }
.bc-in a { color: #9CA3AF; text-decoration: none; font-weight: 400; transition: color .2s; }
.bc-in a:hover { color: var(--azure); }
.bc-in span { color: var(--text); font-weight: 500; }

/* ── Fade-up Animation ───────────────────────────── */
.fu { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fu.on { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════
   RESPONSIVE — Shared breakpoints
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .sec { padding: 56px 0; }
}
@media (max-width: 820px) {
  .container { padding: 0 28px; }
  .mstrip-in { flex-direction: column; align-items: flex-start; gap: 24px; }
  .btn-msg { width: 100%; justify-content: center; }
  .shead { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .sec { padding: 44px 0; }
  .shead { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .shead .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .sec { padding: 36px 0; }
  .stitle { font-size: clamp(26px, 7vw, 36px); }
  .ssub { font-size: 14px; }
  .ms-text h2 { font-size: clamp(22px, 6vw, 32px); }
}
@media (max-width: 430px) {
  .container { padding: 0 14px; }
}
@media (max-width: 390px) {
  .container { padding: 0 12px; }
}