/* ==========================================================
   IslandTravelAtlas — Bali Hub Cards V3

   Deterministic card system for:
   1. Recommended sequence
   2. Bali planning collection
   3. Commercial planning tools
   4. Destination tool links

   No JavaScript or runtime card detection.
   ========================================================== */

html body.ita-bali-hub-cards-v3 {
  --bh-page: #f3f7f5;
  --bh-surface: #ffffff;
  --bh-soft: #eaf3ef;
  --bh-soft-two: #f8fbf9;
  --bh-border: #d4e2dc;

  --bh-ink: #142820;
  --bh-text: #40574d;
  --bh-muted: #667a70;

  --bh-primary: #087c6c;
  --bh-primary-dark: #056456;
  --bh-primary-soft: #dff1eb;

  --bh-radius: 18px;
  --bh-shadow:
    0 13px 34px rgba(17, 55, 44, 0.09);

  background:
    var(--bh-page) !important;

  color:
    var(--bh-text) !important;
}

/* ==========================================================
   SECTION FOUNDATION
   ========================================================== */

html body.ita-bali-hub-cards-v3
main section.bali-hub-card-section {
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    clamp(48px, 5.6vw, 76px)
    0 !important;

  border-top:
    1px solid var(--bh-border) !important;

  background:
    var(--bh-surface) !important;

  color:
    var(--bh-text) !important;

  text-align:
    left !important;
}

html body.ita-bali-hub-cards-v3
main section.bali-hub-card-section:nth-of-type(even) {
  background:
    var(--bh-page) !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-card-shell {
  width:
    min(1180px, calc(100% - 40px)) !important;

  margin-inline:
    auto !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-section-head {
  display:
    block !important;

  max-width:
    820px !important;

  margin:
    0 0 30px !important;

  text-align:
    left !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-eyebrow {
  margin:
    0 0 10px !important;

  color:
    var(--bh-primary) !important;

  -webkit-text-fill-color:
    var(--bh-primary) !important;

  opacity:
    1 !important;

  font-size:
    0.76rem !important;

  font-weight:
    850 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0.1em !important;

  text-transform:
    uppercase !important;

  text-align:
    left !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-section-head h2 {
  max-width:
    820px !important;

  margin:
    0 0 15px !important;

  color:
    var(--bh-ink) !important;

  -webkit-text-fill-color:
    var(--bh-ink) !important;

  opacity:
    1 !important;

  font-size:
    clamp(1.7rem, 3vw, 2.45rem) !important;

  font-weight:
    840 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -0.035em !important;

  text-align:
    left !important;

  text-wrap:
    balance;
}

html body.ita-bali-hub-cards-v3
.bali-hub-section-head p:last-child {
  max-width:
    790px !important;

  margin:
    0 !important;

  color:
    var(--bh-text) !important;

  -webkit-text-fill-color:
    var(--bh-text) !important;

  opacity:
    1 !important;

  font-size:
    1rem !important;

  line-height:
    1.68 !important;

  text-align:
    left !important;

  text-wrap:
    pretty;
}

/* ==========================================================
   GRID SYSTEMS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-sequence-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    clamp(17px, 2.1vw, 23px) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}

html body.ita-bali-hub-cards-v3
.bali-library-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    clamp(18px, 2.4vw, 26px) !important;
}

html body.ita-bali-hub-cards-v3
.bali-commercial-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    clamp(18px, 2.4vw, 26px) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}

html body.ita-bali-hub-cards-v3
.bali-tool-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    16px !important;
}

/* ==========================================================
   SHARED CARD
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-hub-card {
  position:
    relative !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    flex-start !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    clamp(21px, 2.5vw, 28px) !important;

  border:
    1px solid var(--bh-border) !important;

  border-radius:
    var(--bh-radius) !important;

  background:
    var(--bh-surface) !important;

  color:
    var(--bh-text) !important;

  -webkit-text-fill-color:
    var(--bh-text) !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  box-shadow:
    var(--bh-shadow) !important;

  text-align:
    left !important;

  text-decoration:
    none !important;

  transform:
    none !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-card > * {
  max-width:
    100% !important;

  margin-left:
    0 !important;

  margin-right:
    0 !important;

  text-align:
    left !important;
}

html body.ita-bali-hub-cards-v3
.bali-hub-card:hover {
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(8, 124, 108, 0.38) !important;

  box-shadow:
    0 18px 42px rgba(17, 55, 44, 0.13) !important;
}

/* ==========================================================
   CARD NUMBER AND LABEL
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-card-number {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  min-width:
    44px !important;

  min-height:
    34px !important;

  margin:
    0 0 17px !important;

  padding:
    6px 11px !important;

  border-radius:
    999px !important;

  background:
    var(--bh-primary-soft) !important;

  color:
    var(--bh-primary-dark) !important;

  -webkit-text-fill-color:
    var(--bh-primary-dark) !important;

  opacity:
    1 !important;

  font-size:
    0.77rem !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.08em !important;

  text-align:
    center !important;
}

html body.ita-bali-hub-cards-v3
.bali-card-label {
  display:
    block !important;

  margin:
    0 0 10px !important;

  color:
    var(--bh-primary) !important;

  -webkit-text-fill-color:
    var(--bh-primary) !important;

  opacity:
    1 !important;

  font-size:
    0.74rem !important;

  font-weight:
    850 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0.08em !important;

  text-transform:
    uppercase !important;

  text-align:
    left !important;
}

/* ==========================================================
   CARD TYPOGRAPHY
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-hub-card h3 {
  width:
    100% !important;

  margin:
    0 0 11px !important;

  color:
    var(--bh-ink) !important;

  -webkit-text-fill-color:
    var(--bh-ink) !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  font-size:
    clamp(1.12rem, 1.65vw, 1.3rem) !important;

  font-weight:
    830 !important;

  line-height:
    1.24 !important;

  letter-spacing:
    -0.018em !important;

  text-align:
    left !important;

  text-wrap:
    balance;
}

html body.ita-bali-hub-cards-v3
.bali-hub-card p {
  width:
    100% !important;

  flex-grow:
    1 !important;

  margin:
    0 0 20px !important;

  color:
    var(--bh-text) !important;

  -webkit-text-fill-color:
    var(--bh-text) !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  font-size:
    0.96rem !important;

  font-weight:
    430 !important;

  line-height:
    1.62 !important;

  text-align:
    left !important;

  text-wrap:
    pretty;
}

/* ==========================================================
   CARD ACTION
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-card-action {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  width:
    auto !important;

  min-height:
    42px !important;

  margin:
    auto 0 0 !important;

  padding:
    10px 15px !important;

  border:
    1px solid var(--bh-primary) !important;

  border-radius:
    10px !important;

  background:
    var(--bh-primary) !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  font-size:
    0.9rem !important;

  font-weight:
    810 !important;

  line-height:
    1.2 !important;

  text-align:
    left !important;

  text-decoration:
    none !important;
}

html body.ita-bali-hub-cards-v3
.bali-card-action:hover {
  border-color:
    var(--bh-primary-dark) !important;

  background:
    var(--bh-primary-dark) !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;
}

/* ==========================================================
   SEQUENCE CARDS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-sequence-card {
  min-height:
    300px !important;
}

/* ==========================================================
   LIBRARY CARDS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-library-card {
  min-height:
    300px !important;
}

/* ==========================================================
   COMMERCIAL CARDS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-commercial-card {
  min-height:
    285px !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--bh-soft-two) 100%
    ) !important;
}

/* ==========================================================
   TOOL CARDS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-tool-card {
  min-height:
    170px !important;

  padding:
    22px !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--bh-soft)
    ) !important;
}

html body.ita-bali-hub-cards-v3
.bali-tool-card p {
  margin-bottom:
    17px !important;
}

/* ==========================================================
   FOCUS
   ========================================================== */

html body.ita-bali-hub-cards-v3
.bali-hub-card:focus-visible,
html body.ita-bali-hub-cards-v3
.bali-card-action:focus-visible {
  outline:
    4px solid rgba(8, 124, 108, 0.24) !important;

  outline-offset:
    3px !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1040px) {
  html body.ita-bali-hub-cards-v3
  .bali-sequence-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  html body.ita-bali-hub-cards-v3
  .bali-library-grid,
  html body.ita-bali-hub-cards-v3
  .bali-commercial-grid,
  html body.ita-bali-hub-cards-v3
  .bali-tool-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  html body.ita-bali-hub-cards-v3
  .bali-hub-card-shell {
    width:
      min(100% - 24px, 1180px) !important;
  }

  html body.ita-bali-hub-cards-v3
  main section.bali-hub-card-section {
    padding:
      42px 0 !important;
  }

  html body.ita-bali-hub-cards-v3
  .bali-sequence-grid,
  html body.ita-bali-hub-cards-v3
  .bali-library-grid,
  html body.ita-bali-hub-cards-v3
  .bali-commercial-grid,
  html body.ita-bali-hub-cards-v3
  .bali-tool-grid {
    grid-template-columns:
      1fr !important;
  }

  html body.ita-bali-hub-cards-v3
  .bali-sequence-card,
  html body.ita-bali-hub-cards-v3
  .bali-library-card,
  html body.ita-bali-hub-cards-v3
  .bali-commercial-card,
  html body.ita-bali-hub-cards-v3
  .bali-tool-card {
    min-height:
      0 !important;
  }

  html body.ita-bali-hub-cards-v3
  .bali-card-action {
    width:
      100% !important;

    justify-content:
      center !important;

    text-align:
      center !important;
  }
}