/**
 * Restauranginfo – öppettider + adress/kontakt
 * Depends: design/tokens.css, design/buttons.css
 */

.restaurant-info {
  padding: var(--section-padding-y) var(--content-gutter);
  background: var(--color-bg-alt);
  /* Mer luft mellan intro och korten. rhythm.css sätter intro-gapet via
   * `margin-block-end: var(--rhythm-block-gap)`; vi överstyr bara variabeln
   * inom sektionen (default ~8px) -> ingen specificitetsstrid, gäller globalt. */
  --rhythm-block-gap: clamp(var(--space-6), 4vw, var(--space-10));
}

.restaurant-info__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.restaurant-info__intro {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.restaurant-info__title {
  color: var(--color-heading, var(--color-dark));
}

.restaurant-info__lead {
  color: var(--color-text-muted);
}

.restaurant-info__lead a {
  color: var(--color-link, currentColor);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.restaurant-info__lead strong,
.restaurant-info__lead b {
  font-weight: 700;
}

/* Två kort som tillsammans täcker hela innehållsbredden, lika höga. */
.restaurant-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.restaurant-info__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 14px);
  padding: clamp(20px, 2.2vw, 32px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

.restaurant-info__card-title {
  margin-top: 0;
  color: var(--color-heading, var(--color-dark));
}

/* Öppettider */
.restaurant-info__hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.restaurant-info__hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.restaurant-info__hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.restaurant-info__day {
  font-weight: 600;
  color: var(--color-heading, var(--color-dark));
}

.restaurant-info__time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hitta hit */
.restaurant-info__address {
  font-style: normal;
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.restaurant-info__contact {
  margin: 0 0 var(--space-4);
}

.restaurant-info__phone {
  color: inherit;
  text-decoration: none;
}

.restaurant-info__phone:hover {
  text-decoration: underline;
}

/* Kontaktikoner som standard framför adress och telefon.
 * Mask + currentColor -> ikonen tar samma färg som texten.
 * :not(:empty) -> ingen ikon när fältet saknar innehåll. */
.restaurant-info__address:not(:empty)::before,
.restaurant-info__phone:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.45em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--contact-icon) center / contain no-repeat;
  mask: var(--contact-icon) center / contain no-repeat;
}

.restaurant-info__address:not(:empty)::before {
  --contact-icon: url("../../assets/icons/pin.svg");
  vertical-align: 0.05em;
}

.restaurant-info__phone:not(:empty)::before {
  --contact-icon: url("../../assets/icons/phone.svg");
}

/* Knapp-raden längst ner – pressas till botten så korten ser balanserade ut. */
.restaurant-info__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* WhatsApp – använder temats .btn (samma höjd + border-radius som övriga knappar),
 * vi byter bara färgerna till WhatsApp-grön med vit logga. */
.restaurant-info__whatsapp.btn {
  background-color: #25d366;
  border-color: #25d366;
  color: #fff;
}

.restaurant-info__whatsapp.btn:hover {
  background-color: #1ebe5b;
  border-color: #1ebe5b;
  color: #fff;
}

.restaurant-info__whatsapp.btn:focus-visible {
  outline: 2px solid #128c4a;
  outline-offset: 2px;
}

/* OBS: scope:ad under .restaurant-info för att slå rhythm.css-regeln
 * `section:not([data-site-rhythm="off"]) :is(img,…)` (specificitet 0,1,2)
 * som annars ger ikonen ~24px margin-bottom -> drar upp knapphöjden och
 * flyttar loggan ur centrum. Denna selektor är (0,2,0) och vinner. */
.restaurant-info__whatsapp-icon {
  /* Skalar med knappens textstorlek så ikon + text alltid är i linje.
   * margin:0 är ett defensivt skyddsnät; rhythm.css undantar numera
   * ikoner i .btn + .man-icon globalt, så ingen 24px-marginal längre. */
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  display: block;
  flex: 0 0 auto;
  align-self: center;
  /* Svart glyf -> vit, så den syns på den gröna knappen. */
  filter: brightness(0) invert(1);
}

.restaurant-info__whatsapp[hidden],
.restaurant-info__book[hidden],
.restaurant-info__contact[hidden] {
  display: none;
}

@media (min-width: 820px) {
  .restaurant-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}