/* HERO */
.hero{ padding:24px 0; }

.heroCard{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  min-height:440px;

  background:#0b1220;

  border:1px solid rgba(17,12,26,.10);
  box-shadow:
    0 32px 100px rgba(24,12,40,.14),
    0 0 0 1px rgba(90,46,145,.08);

  transform:translateZ(0);
}

/* MEDIA */
.heroMedia{ position:absolute; inset:0; }

.heroMedia img{
  width:100%;
  height:100%;
  object-fit:cover;

  transform:scale(1.04);
  filter:contrast(1.06) saturate(1.06) brightness(.95);
  transition:transform 6s ease;
}

/* subtle slow zoom */
.heroCard:hover .heroMedia img{
  transform:scale(1.08);
}

/* SHADE */
.heroShade{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 560px at 18% 28%, rgba(123,67,196,.45), rgba(123,67,196,0) 60%),
    linear-gradient(90deg,
      rgba(10,8,20,.75) 0%,
      rgba(10,8,20,.45) 45%,
      rgba(10,8,20,.15) 65%,
      rgba(10,8,20,0) 80%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
}

/* CONTENT */
.heroContent{
  position:relative;
  z-index:2;
  padding:52px 52px 60px;
  max-width:800px;
}

/* KICKER */
.heroKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 12px;
  border-radius:999px;

  font-weight:950;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(255,255,255,.9);

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
}

/* TITLE */
.heroTitle{
  margin:14px 0 10px;

  font-size:clamp(34px,3.8vw,58px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:950;

  color:#fff;
  text-shadow:0 20px 46px rgba(0,0,0,.35);
}

/* SUBTITLE */
.heroSub{
  margin:0;

  color:rgba(255,255,255,.85);
  line-height:1.75;
  font-size:15.8px;
  max-width:70ch;
}

/* CTA ROW */
.heroCtas{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  height:46px;
  padding:0 18px;

  border-radius:999px;
  text-decoration:none;
  font-weight:950;

  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(10px);

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(0,0,0,.25);
}

/* PRIMARY */
.btn--primary{
  background:rgba(255,255,255,.96);
  color:#0f172a;
  border-color:rgba(255,255,255,.40);
}

.btn--primary:hover{
  background:#fff;
}

/* GHOST */
.btn--ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
}

.btn--ghost:hover{
  background:rgba(255,255,255,.16);
}

/* RESPONSIVE */
@media (max-width:980px){

  .heroCard{ min-height:520px; }

  .heroContent{
    padding:36px 22px 24px;
    max-width:92%;
  }

  .heroShade{
    background:
      radial-gradient(900px 520px at 50% 16%, rgba(123,67,196,.40), rgba(123,67,196,0) 60%),
      linear-gradient(180deg,
        rgba(10,8,20,.75) 0%,
        rgba(10,8,20,.45) 50%,
        rgba(10,8,20,.12) 85%,
        rgba(10,8,20,0) 96%);
  }

}

/* =========================================================
   ACCOMMODATION ARTICLE — VP (VISA PAGE) CONSISTENT THEME
   Matches the "Visa & Permissions" purple premium system.
   Works with your existing article HTML classnames.
   Brand purple: #5a2e91 | More serious tone
   ========================================================= */

.article{
  padding: 26px 0 10px;
  position: relative;
}

/* serious, subtle background (same logic as vp page) */
.article::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 560px at 12% 0%, rgba(90,46,145,.08), transparent 60%),
    radial-gradient(720px 520px at 88% 18%, rgba(123,67,196,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(90,46,145,.02) 100%);
  opacity:.95;
}
.article > .container{ position:relative; z-index:1; }

/* -----------------------------------
   INTRO HEAD (vpHead-like)
----------------------------------- */
.articleHead{
  position: relative;
  max-width: 980px;
  display:grid;
  gap: 8px;
  padding: 12px 0 18px;
}

.articleTitle{
  margin:0;
  font-size: 22px;                /* match vpHead__t scale */
  line-height: 1.18;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
  font-weight: 950;
}

/* purple underline accent */
.articleTitle::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
  opacity:.95;
}

.articleLead{
  margin:0;
  color: rgba(15,11,28,.70);
  line-height: 1.75;
  max-width: 78ch;
  font-size: 15.2px;              /* match vpHead__s */
}

/* -----------------------------------
   BLOCKS (same rhythm as vpSection)
----------------------------------- */
.block{
  position: relative;
  padding: 22px 0;
}

.block + .block{
  border-top: 1px solid rgba(17,12,26,.08);
}

/* layout */
.blockRow{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items:start;
}

/* reverse */
.blockRow--reverse{
  grid-template-columns: .65fr 1.35fr;
}
.blockRow--reverse .blockText{ order:2; }
.blockRow--reverse .blockAside{ order:1; }

/* -----------------------------------
   TEXT AREA
----------------------------------- */
.blockH{
  margin:0;
  font-size: 16.2px;              /* align to vpInfo__t */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
  font-weight: 950;
}

/* short accent rule */
.blockH::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
  opacity:.95;
}

.blockP{
  margin: 10px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.85;
  font-size: 14.8px;
  max-width: 78ch;
}

/* -----------------------------------
   FEATURE LIST -> same card system as vpCard/vpInfo
----------------------------------- */
.featureList{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.feat{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  padding: 14px 14px 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feat:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
  border-color: rgba(90,46,145,.18);
}

.feat__t{
  margin:0;
  font-size: 14.8px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}

/* target your current <ul> markup (no class on ul) */
.feat ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(15,11,28,.74);
  line-height: 1.8;
  font-size: 14.2px;
}

/* -----------------------------------
   NOTE -> vpTip-like
----------------------------------- */
.note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(90,46,145,.16);
  background: rgba(90,46,145,.06);
  color: rgba(15,11,28,.76);
  line-height: 1.75;
}

/* -----------------------------------
   ASIDE (media + callout) -> vpSideCard style
----------------------------------- */
.blockAside{
  display:grid;
  gap: 12px;
}

.asideMedia{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:#0b1220;
  box-shadow: 0 30px 90px rgba(24,12,40,.18);
  position:relative;
}

.asideMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(820px 460px at 18% 18%, rgba(123,67,196,.18), rgba(123,67,196,0) 62%),
    linear-gradient(180deg, rgba(15,11,28,.06) 55%, rgba(15,11,28,.28) 100%);
}

.asideMedia img{
  width:100%;
  height: 250px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.asideCallout{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.05), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.88);
  padding: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
}

.asideCallout__k{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}

.asideCallout__t{
  margin-top: 6px;
  font-weight: 950;
  font-size: 15.8px;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}

.asideCallout__p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

.asideLink{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 950;
  color: rgba(90,46,145,.98);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.asideLink:hover{
  transform: translateY(-1px);
  background: rgba(90,46,145,.14);
  border-color: rgba(90,46,145,.22);
  box-shadow: 0 16px 52px rgba(24,12,40,.10);
}

/* -----------------------------------
   CARDS SECTIONS (Accommodation types + Tips)
----------------------------------- */
.cards{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
  position: relative;
}

.cardsHead{
  display:grid;
  gap: 8px;
  max-width: 980px;
  margin-bottom: 14px;
}

.cardsTitle{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
}

.cardsTitle::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
}

.cardsSub{
  margin:0;
  color: rgba(15,11,28,.70);
  line-height: 1.75;
  font-size: 15.2px;
}

/* -----------------------------------
   Accommodation type cards
   NOTE: your HTML lacks image wrapper; this makes them "solid serious cards"
----------------------------------- */
.cardGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.placeCard{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.placeCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
  border-color: rgba(90,46,145,.18);
}

/* inner body */
.placeCard__b{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* kicker */
.placeCard__k{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}

/* title */
.placeCard__t{
  margin:0;
  font-weight: 950;
  font-size: 16.2px;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: rgba(15,11,28,.96);
}

/* description */
.placeCard__d{
  margin:0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.3px;
}

/* -----------------------------------
   Tips grid (you have infoGrid/infoCard in HTML)
----------------------------------- */
.infoGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.infoCard{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(90,46,145,.04), rgba(90,46,145,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  padding: 14px 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.infoCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
  border-color: rgba(90,46,145,.18);
}

.infoCard__t{
  font-weight: 950;
  font-size: 15.2px;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}

.infoCard__d{
  margin-top: 8px;
  color: rgba(15,11,28,.72);
  line-height: 1.75;
  font-size: 14.4px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px){
  .blockRow{ grid-template-columns: 1fr; }
  .blockRow--reverse{ grid-template-columns: 1fr; }
  .blockRow--reverse .blockText{ order: 1; }
  .blockRow--reverse .blockAside{ order: 2; }
  .asideMedia img{ height: 240px; }
}

@media (max-width: 980px){
  .cardGrid{ grid-template-columns: 1fr; }
  .featureList{ grid-template-columns: 1fr; }
  .infoGrid{ grid-template-columns: 1fr; }
}