/* H&H Mesa Pharmacy — from Figma Misc-26-Q3, Section 2 (node 112-9394) */

:root {
  --bg: #322e26;         /* page + grout */
  --terracotta: #a45d44;
  --sage: #bbcdc6;
  --label: #8c9a8d;
  --ink: #322e26;
  --cream: #e7e3df;
  --footer-ink: #45332f;

  /* Fluid scale: 12px @ 360vw → 15px @ 1280vw, keeps growing at the same slope */
  font-size: calc(10.8261px + 0.326087vw);

  /* Grout: outer padding 8→17px, gaps 14→22px over the same range */
  --grout-pad: calc(4.4783px + 0.97826vw);
  --grout-gap: calc(10.8696px + 0.869565vw);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.53;
  color: var(--ink);
}

.filter-defs { position: absolute; }

.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grout-gap);
  padding: var(--grout-pad);
  min-height: 100vh;
}

/* ---- Panels: rough-edged fill lives on ::before so content stays crisp ---- */

.tile { position: relative; }

.tile--logo::before,
.tile--contact::before,
.tile--footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tile > * { position: relative; z-index: 1; }

.tile--logo::before   { background: var(--terracotta); filter: url(#rough-a); }
.tile--contact::before{ background: var(--sage);       filter: url(#rough-b); }
.tile--footer::before { background: var(--terracotta); filter: url(#rough-d); }

/* ---- Logo tile ---- */

.tile--logo {
  aspect-ratio: 344 / 288;
  display: grid;
  place-items: center;
}
.logo { width: 40%; max-width: 192px; height: auto; }

/* ---- Contact tile ---- */

.tile--contact {
  padding: 1.9em;
  display: flex;
  flex-direction: column;
  gap: 2.33em;
}
.star-8pt {
  position: absolute;
  top: 1.15em;
  right: 1.4em;
  width: 2.85em;
  height: auto;
}
.contact-row { display: flex; flex-direction: column; gap: 1em; }
.contact-bottom { display: flex; flex-direction: column; gap: 2.33em; }
.contact-label { color: var(--label); }
.contact-value {
  color: var(--ink);
  font-style: normal;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* ---- Photo band ---- */

.tile--photo { aspect-ratio: 341 / 308; }
.photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Figma's exported alpha mask: rough edges without wobbling the image itself */
  -webkit-mask-image: url("assets/photo-edge-mask.svg");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("assets/photo-edge-mask.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vert {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  color: var(--cream);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.vert--left  { left: 1.4em; }
.vert--right { right: 1.4em; }
.vert-dash {
  width: 1.5px;
  height: 1.65em;
  background: var(--cream);
  margin: 0.55em 0;
}

.mortar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4em;
  height: auto;
}

/* ---- Footer ---- */

.tile--footer {
  min-height: calc(223.652px + 5.652174vw); /* 244px @ 360 → 296px @ 1280 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2em 1.5em 1.8em;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-lines { display: flex; flex-direction: column; }
.footer-line1 { color: var(--footer-ink); }
.footer-line2 { color: var(--cream); }
.star-footer { width: 1.5em; height: auto; }
.footer-legal {
  font-weight: 400;
  font-size: 0.83em;
  color: #fff;
}

/* ---- Desktop ---- */

@media (min-width: 768px) {
  .page {
    grid-template-columns: 622fr 600fr;
  }

  .tile--logo { aspect-ratio: 622 / 638; }
  .logo { width: 36%; }

  .tile--contact {
    aspect-ratio: auto;
    justify-content: space-between;
    padding: 3em;
    gap: 0;
  }
  .star-8pt { top: 2.85em; right: 2.15em; width: 4em; }
  .contact-bottom { gap: 1.87em; }

  .tile--photo,
  .tile--footer { grid-column: 1 / -1; }

  .tile--photo { aspect-ratio: 1240 / 716; }
  .vert--left  { left: 3em; }
  .vert--right { right: 2.8em; }
  .mortar { width: 5em; }

  .tile--footer { padding: 2.6em 3.2em 2.1em; }
  .star-footer { width: 1.9em; }
}

/* Wide enough for label | value side by side (per the 1280 design) */
@media (min-width: 1200px) {
  .contact-row {
    flex-direction: row;
    gap: 1.6em;
  }
  .contact-label { flex: 0 0 7.2em; }
  .mortar { width: 6em; }
  .logo { max-width: 256px; }
}