/* Plum & Sugar — location landing page (hsr-layout/index.php, jp-nagar/index.php) */

.loc-hero{min-height:90svh;display:flex;align-items:center;padding-top:var(--nav-h);background:var(--blush);position:relative;overflow:hidden}
.loc-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 105% 20%,rgba(201,169,110,.16) 0%,transparent 65%);pointer-events:none}
.loc-hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.loc-hero-img{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;width:100%;position:relative;box-shadow:0 28px 72px -20px rgba(74,25,66,.26)}
.loc-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.loc-badge{position:absolute;bottom:18px;left:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:100px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--plum);border:1px solid var(--line-gold);display:flex;align-items:center;gap:7px}
.loc-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:#22c55e}
.loc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.loc-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:100px;border:1px solid var(--line-gold);font-size:12px;font-weight:500;color:var(--text-2);background:rgba(255,255,255,.65)}
.loc-chip svg{color:var(--gold-deep)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(14px,2vw,22px)}
.cat-card{border-radius:var(--radius-lg);overflow:hidden;position:relative;display:block;text-decoration:none;aspect-ratio:3/4}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.cat-card:hover img{transform:scale(1.06)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(74,25,66,.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.cat-overlay .cat-label{font-size:10px;letter-spacing:.28em;font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.cat-overlay h4{font-family:var(--serif);font-size:clamp(18px,2.2vw,24px);color:#fff;margin:0 0 4px}
.cat-overlay span{font-size:12px;color:rgba(255,255,255,.65)}
.cat-arrow{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;opacity:0;transition:opacity .25s}
.cat-card:hover .cat-arrow{opacity:1}

.info-card{background:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,40px);box-shadow:var(--shadow-card);border:1px solid var(--line)}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line-gold);box-shadow:var(--shadow-card)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

.team-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px)}
.team-card{text-align:center}
.team-photo{width:clamp(110px,12vw,150px);aspect-ratio:1;border-radius:50%;background:var(--blush-2);border:3px solid var(--line-gold);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:36px;color:var(--gold-deep);overflow:hidden}
.team-card h5{font-size:16px;margin-bottom:3px}
.team-card small{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:700px){.team-grid-4{grid-template-columns:repeat(2,1fr)}}

.cta-band{background:var(--plum);border-radius:var(--radius-lg);padding:clamp(36px,5vw,72px) clamp(24px,4vw,56px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 85% -10%,rgba(201,169,110,.18) 0%,transparent 60%);pointer-events:none}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.7);max-width:44ch;margin:12px auto 28px;position:relative}

@media (max-width:768px){
  .loc-hero-grid{grid-template-columns:1fr}
  .loc-hero-img{aspect-ratio:16/10;width:100%}
  .cat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){ .cat-grid{grid-template-columns:1fr 1fr} }