/* =========================================================
   Seoul Avenue — Home renewal layer
   Loaded AFTER site.css. Enforces the official CI palette:
     Ivory  #FFF8EA  → background & whitespace
     Brown  #5A4636  → logo lettering, headings, body copy
     Orange #FF7A00  → the letter "A" + accent hairlines only
     Beige  #C9B399  → surfaces, dividers, supporting UI
   Orange is deliberately limited; no large orange fields.
   ========================================================= */

:root{
  --ivory:#FFF8EA;
  --orange:#FF7A00;
  --brown:#5A4636;
  --beige:#C9B399;
}

/* ---------- base: flat Ivory background for readability ---------- */
body{
  background: var(--ivory);
}

h1,h2,h3{color: var(--brown)}

/* ---------- header: real logo asset ---------- */
.brand-logo{
  display:block;
  height:34px;
  width:auto;
}

.header{
  background: rgba(254,251,245,.86);
}

/* ---------- accent restraint on shared components ---------- */
.chip{
  background: rgba(255,255,255,.82);
  border-color: rgba(90,70,54,.12);
}

.chip-accent{
  background: rgba(255,122,0,.09);
  border-color: rgba(255,122,0,.26);
  color: #A95400;
}

.btn-primary{
  background: var(--brown);
  border-color: var(--brown);
  color: var(--ivory);
  box-shadow: 0 10px 24px rgba(90,70,54,.14);
}

.btn-primary:hover{
  background: #4B392E;
  border-color: #4B392E;
  color: var(--ivory);
}

.btn-instagram{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:10px 16px;
  border:1px solid rgba(255,122,0,.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(255,248,234,.96) 48%, rgba(255,122,0,.10) 100%);
  box-shadow: 0 14px 28px rgba(90,70,54,.08);
  text-decoration:none;
}

.btn-instagram:hover{
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,248,234,.98) 48%, rgba(255,122,0,.15) 100%);
  border-color: rgba(255,122,0,.28);
  text-decoration:none;
}

.btn-instagram::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:4px;
  flex:0 0 auto;
  background:
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.95) 0 11%, transparent 12%),
    linear-gradient(135deg, #FED87A 0%, #FF7A00 42%, #D05A9B 72%, #6A54C9 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.btn-instagram__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  line-height:1.15;
}

.btn-instagram__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: rgba(90,70,54,.56);
}

.btn-instagram__label{
  font-size:14px;
  font-weight:800;
  color: var(--brown);
}

.nav a.is-current{
  background: rgba(201,179,153,.40);
  border: 1px solid rgba(90,70,54,.14);
}

.panel-surface{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(700px 520px at 22% 12%, rgba(201,179,153,.20) 0%, rgba(201,179,153,0) 58%),
    rgba(255,255,255,.86);
}

.opening-card{
  background:
    radial-gradient(760px 540px at 16% 6%, rgba(201,179,153,.22) 0%, rgba(201,179,153,0) 62%),
    rgba(255,255,255,.86);
}

.cta-panel{background: rgba(255,255,255,.82)}
.page-copy{background: rgba(255,255,255,.86)}
.ig-card{background: rgba(255,255,255,.82)}
.ig-card:hover{background: rgba(255,255,255,.94)}

/* ---------- section headings ---------- */
.section-head h2{
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -.5px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(90,70,54,.62);
}

.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  border-radius:2px;
  background: var(--orange);
  flex:0 0 auto;
}

/* ---------- hero ---------- */
.hero-logo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-logo img{
  width: min(100%, 420px);
  height:auto;
  display:block;
}

.hero-logo--square img{
  width:min(100%, 360px);
  border-radius:28px;
  box-shadow: 0 22px 42px rgba(90,70,54,.14);
}

/* ---------- brand tiles ---------- */
.brand-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}

.brand-tile{
  margin:0;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid rgba(90,70,54,.10);
  overflow:hidden;
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 26px rgba(90,70,54,.05);
}

.brand-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .5s ease;
}

.brand-tile:hover img{transform: scale(1.04)}

.brand-tile--more{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  border-style:dashed;
  border-color: rgba(201,179,153,.85);
  background: rgba(255,248,234,.60);
  color: rgba(90,70,54,.70);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.5;
}

/* ---------- in preparation ---------- */
.soon-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.soon-tile{
  margin:0;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid rgba(90,70,54,.10);
  overflow:hidden;
  background: rgba(201,179,153,.16);
}

.soon-tile img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* ---------- mood ---------- */
.mood-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.mood-tile{
  margin:0;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid rgba(90,70,54,.10);
  overflow:hidden;
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 26px rgba(90,70,54,.05);
}

.mood-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 40%;
  display:block;
}

/* ---------- why Ljubljana ---------- */
.why-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
  align-items:stretch;
}

.why-media{
  margin:0;
  border-radius: calc(var(--radius) + 8px);
  border:1px solid var(--line);
  overflow:hidden;
  background: rgba(255,255,255,.70);
  min-height:300px;
}

.why-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.why-body{
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}

.why-body h3{
  margin:0;
  font-size:17px;
  letter-spacing:-.2px;
}

.why-body p{
  margin:12px 0 0;
  color: rgba(90,70,54,.76);
  line-height:1.72;
}

.why-list{
  display:grid;
  gap:8px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
}

.why-list li{
  display:flex;
  gap:10px;
  color: rgba(90,70,54,.80);
  font-size:13.5px;
  line-height:1.6;
}

.why-list li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background: var(--beige);
  margin-top:7px;
  flex:0 0 auto;
}

/* ---------- team ---------- */
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.team-card{
  margin:0;
  padding:12px;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(90,70,54,.05);
}

.team-card img{
  width:100%;
  aspect-ratio: 5 / 3;
  object-fit: contain;
  display:block;
  border-radius:12px;
  background: rgba(255,248,234,.60);
}

/* ---------- guide cards ---------- */
.guide-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

/* ---------- small print ---------- */
.note--center{
  margin-top:14px;
  text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .mood-grid{grid-template-columns: repeat(3, minmax(0, 1fr))}
  .guide-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}

@media (max-width: 980px){
  .brand-tiles{grid-template-columns: repeat(4, minmax(0, 1fr))}
  .soon-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .mood-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .why-grid{grid-template-columns: 1fr}
  .why-media{min-height:220px}
  .team-grid{grid-template-columns: 1fr}
  .brand-logo{height:30px}
  .hero-logo img{width: min(100%, 320px)}
  .hero-logo--square img{width:min(100%, 300px)}
}

@media (max-width: 560px){
  .brand-tiles{grid-template-columns: repeat(3, minmax(0, 1fr))}
  .soon-grid{grid-template-columns: 1fr}
  .mood-grid{grid-template-columns: 1fr}
  .guide-grid{grid-template-columns: 1fr}
}