/* Bakes by S - Location page styles (Pink & Black theme) */
/*
  Layout for the map and address. Uses a two column grid on larger screens
  and switches to a single column on smaller devices for clarity.
*/

/* Theme variables (shared) */
:root {
  --bg: #0f0f12;
  --surface: #15151a;
  --text: #f7f7f9;
  --muted: #cfcfd6;
  --border: #2a2a30;
  --pink: #ff4da6;
}

/* Base */
html, body { margin: 0; padding: 0; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

main { max-width: 1200px; margin: 32px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.2rem); }

.location-info { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
/* Two column grid: map gets twice as much width as the address and variable used */
.map iframe { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 14px; }
/* --border . */
.address { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.address h2 { margin: 0 0 8px; }
.address p { margin: 6px 0; color: var(--muted); }

@media (max-width: 900px) {
  /* Phones and tablets: single column layout and shorter map height. */
  .location-info { grid-template-columns: 1fr; }
  .map iframe { height: 320px; }
}