/* =========================================================
   LEGACY HOMEPAGE SECTIONS — MODERN REDESIGN
   ---------------------------------------------------------
   Targets stable class names only (never the #pg-1874-* /
   #panel-1874-* IDs, which are tied to one specific page ID
   on the old site and won't match once this content lives
   on a different page ID here). Brand colors match the rest
   of the redesign: --cab-primary (#2D4698), --cab-accent
   (#D4A017), with sensible hex fallbacks if those variables
   aren't in scope on this template.
   ========================================================= */

.panel-layout {
    --leg-primary: var(--cab-primary, #2D4698);
    --leg-primary-dark: var(--cab-primary-dark, #1c2f6b);
    --leg-accent: var(--cab-accent, #D4A017);
    --leg-dark: var(--cab-dark, #0f1b3d);
    --leg-platinum: var(--cab-platinum, #F3F9FA);
}

.panel-layout * { box-sizing: border-box; }

/* ---------- SITEORIGIN GRID FIX ----------
   SiteOrigin normally injects a small page-specific <style>
   block computing exact column widths from that page's saved
   _panels_data. Since this content was pasted as raw markup
   rather than built through the page builder UI on THIS page,
   that per-page CSS never gets generated — so every multi-cell
   row was collapsing to a narrow single column with blank
   space beside it. This replaces it with a generic equal-width
   flex layout that works for any row regardless of cell count. */
.panel-layout .panel-grid-cell {
    float: none !important;
    width: auto !important;
}
.panel-layout .panel-grid {
    display: flex;
    flex-wrap: wrap;
}
.panel-layout [class*="panel-row-style-for"] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
}
.panel-layout .panel-grid-cell {
    flex: 1 1 0;
    min-width: 260px;
    padding: 10px;
}

/* Alternate row backgrounds for visual rhythm between sections */
.panel-layout .panel-grid { padding: 48px 20px; }
.panel-layout .panel-grid:nth-of-type(even) { background: var(--leg-platinum); }

/* ---------- HERO SLIDER ---------- */
.panel-layout .metaslider {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15,27,61,.14);
}
.panel-layout .metaslider img { display: block; width: 100%; height: auto; }

/* "Call us" line -> CTA banner */
.panel-layout h2:has(> a[href^="tel:"]) {
    max-width: 640px;
    margin: 28px auto 0;
    padding: 16px 24px;
    background: var(--leg-dark);
    color: #fff;
    border-radius: 999px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.panel-layout h2:has(> a[href^="tel:"]) a[href^="tel:"] {
    color: var(--leg-accent);
    font-weight: 700;
    text-decoration: none;
}
.panel-layout h2:has(> a[href^="tel:"]) a[href^="tel:"]:hover { text-decoration: underline; }

/* ---------- BOOKING FORM WIDGET ---------- */
.widget_travel-eye-booking {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: 0 10px 36px rgba(15,27,61,.10);
}
.widget_travel-eye-booking .widget-title {
    text-align: center;
    font-size: 30px;
    color: var(--leg-dark);
    margin: 0 0 12px;
}
.widget_travel-eye-booking .widget-title::first-letter {
    color: var(--leg-primary);
}
.widget_travel-eye-booking p { text-align: center; color: #666; margin: 0 0 28px; }
.widget_travel-eye-booking input[type="text"],
.widget_travel-eye-booking input[type="email"],
.widget_travel-eye-booking input[type="tel"],
.widget_travel-eye-booking input[type="number"],
.widget_travel-eye-booking textarea,
.widget_travel-eye-booking select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    font-size: 14px;
    background: var(--leg-platinum);
    margin-bottom: 14px;
    transition: border-color .15s ease, background .15s ease;
}
.widget_travel-eye-booking input:focus,
.widget_travel-eye-booking textarea:focus,
.widget_travel-eye-booking select:focus {
    outline: none;
    border-color: var(--leg-primary);
    background: #fff;
}
.widget_travel-eye-booking input[type="submit"],
.widget_travel-eye-booking button {
    width: auto;
    display: block;
    margin: 8px auto 0;
    padding: 14px 40px;
    background: var(--leg-accent);
    color: #1a1a1a;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.widget_travel-eye-booking input[type="submit"]:hover,
.widget_travel-eye-booking button:hover {
    background: #b98a12;
    transform: translateY(-1px);
}

/* ---------- SECTION TITLES (Travel_Eye_Title_Subtitle_Widget) ---------- */
.widget_travel-eye-title-subtitle {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}
.widget_travel-eye-title-subtitle .widget-title {
    font-size: 32px;
    color: var(--leg-dark);
    margin: 0 0 8px;
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}
.widget_travel-eye-title-subtitle .widget-title::first-letter { color: var(--leg-primary); }
.widget_travel-eye-title-subtitle .widget-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    background: var(--leg-accent);
    border-radius: 2px;
}
.widget_travel-eye-title-subtitle p { color: #666; line-height: 1.8; font-size: 15px; }

/* ---------- HOLIDAY PACKAGE / DESTINATION IMAGE GRID ---------- */
.panel-layout .panel-grid-cell { padding: 10px; }
.widget_media_image {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15,27,61,.10);
    transition: transform .2s ease, box-shadow .2s ease;
}
.widget_media_image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15,27,61,.16);
}
.widget_media_image img { display: block; width: 100%; height: auto; }
.widget_media_image a { display: block; }

/* ---------- WELCOME TEXT SECTION ---------- */
.panel-layout .panel-grid[data-style*="parallax"] {
    padding: 64px 20px;
}

/* ---------- SECONDARY (car-type) SLIDERS ---------- */
.panel-layout .panel-grid-cell .metaslider {
    border-radius: 14px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
    .panel-layout .panel-grid { padding: 32px 16px; }
    .widget_travel-eye-booking { padding: 28px 20px; border-radius: 16px; }
    .widget_travel-eye-booking .widget-title { font-size: 24px; }
    .widget_travel-eye-title-subtitle .widget-title { font-size: 24px; }
}