/* Travelicious Extensions — Bottom CTA Banner Widget v1.0.0
   5 colour templates, split image + content panel layout.
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Lato:wght@400;700;900&display=swap');

/* ================================================================
   1. TEMPLATE COLOUR VARIABLES
================================================================ */
.trav-cta--tpl-01 { --panel-bg:#FEF5E7; --text:#1B2A4A; --subtext:#5A6A7E; --accent:#F5B731; --btn-text:#1B2A4A; --plane-lg:#4A90D9; --plane-sm:#F5B731; }
.trav-cta--tpl-02 { --panel-bg:#EAF3FB; --text:#1B2A4A; --subtext:#4A6580; --accent:#F5B731; --btn-text:#1B2A4A; --plane-lg:#1B2A4A; --plane-sm:#F5B731; }
.trav-cta--tpl-03 { --panel-bg:#1B2A4A; --text:#F5F0E8; --subtext:#A0B4C8; --accent:#F5B731; --btn-text:#1B2A4A; --plane-lg:#F5B731; --plane-sm:#F5F0E8; }
.trav-cta--tpl-04 { --panel-bg:#EAF5EE; --text:#1B2A4A; --subtext:#3D6A4F; --accent:#F5B731; --btn-text:#1B2A4A; --plane-lg:#2B7A5E; --plane-sm:#F5B731; }
.trav-cta--tpl-05 { --panel-bg:#FFFFFF; --text:#1B2A4A; --subtext:#5A6A7E; --accent:#E05C8A; --btn-text:#FFFFFF; --plane-lg:#4A90D9; --plane-sm:#E05C8A; }

/* ================================================================
   2. BASE RESET
================================================================ */
.trav-cta-section *,
.trav-cta-section *::before,
.trav-cta-section *::after { box-sizing: border-box; }

/* ================================================================
   3. SECTION — split flex layout
================================================================ */
.trav-cta-section {
  display: flex;
  min-height: 420px;
  width: 100%;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

/* Image right variant */
.trav-cta--img-right { flex-direction: row-reverse; }

/* ================================================================
   4. IMAGE SIDE
================================================================ */
.trav-cta-image {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.trav-cta-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.trav-cta-image__placeholder {
  position: absolute;
  inset: 0;
  background: #D0E8F5;
}

/* ================================================================
   5. DECORATIVE PAPER PLANES
================================================================ */
.trav-cta-planes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}

.trav-cta-plane--lg {
  width: 84px;
  height: 84px;
  color: var(--plane-lg);
  transform: rotate(-20deg);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.22));
}

.trav-cta-plane--sm {
  width: 54px;
  height: 54px;
  color: var(--plane-sm);
  transform: rotate(12deg);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18));
}

/* ================================================================
   6. CONTENT PANEL
================================================================ */
.trav-cta-panel {
  flex: 0 0 50%;
  background-color: var(--panel-bg);
  display: flex;
  align-items: center;
  padding: 60px 56px;
}

.trav-cta-content {
  width: 100%;
  max-width: 480px;
}

/* ================================================================
   7. HEADING
================================================================ */
.trav-cta-heading {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trav-cta-heading__line1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  display: block;
}

.trav-cta-heading__line2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  display: block;
}

/* ================================================================
   8. DESCRIPTION
================================================================ */
.trav-cta-desc {
  font-size: 0.92rem;
  color: var(--subtext);
  line-height: 1.7;
  margin: 0 0 28px;
}

/* ================================================================
   9. CTA BUTTON
================================================================ */
.trav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: var(--accent);
  color: var(--btn-text);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
}
.trav-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--btn-text);
}

/* ================================================================
   10. RESPONSIVE
================================================================ */
@media (max-width: 960px) {
  .trav-cta-panel { padding: 48px 40px; }
  .trav-cta-heading__line1 { font-size: 1.6rem; }
  .trav-cta-heading__line2 { font-size: 1.9rem; }
}

@media (max-width: 768px) {
  .trav-cta-section,
  .trav-cta--img-right { flex-direction: column; }
  .trav-cta-image { min-height: 280px; flex: none; }
  .trav-cta-panel { flex: none; width: 100%; padding: 40px 32px; }
}

@media (max-width: 480px) {
  .trav-cta-panel { padding: 32px 24px; }
  .trav-cta-heading__line1 { font-size: 1.4rem; }
  .trav-cta-heading__line2 { font-size: 1.6rem; }
  .trav-cta-image { min-height: 220px; }
}