/* Restaurant page (/restaurant/<slug>/): who and where, then order, then visit facts, with the photo
   beside it. Desktop: info left, uncropped photo and "Om restaurangen" right. Phone: framed photo
   first, then info, then the description. */
.restaurant-page .rp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-areas: 'info media' 'info about';
  grid-template-rows: max-content 1fr;
  align-content: start;
  column-gap: 56px;
  row-gap: 20px;
  align-items: start;
  margin-top: 26px;
}
.restaurant-page .rp-info { grid-area: info; min-width: 0; }
.restaurant-page .rp-media { grid-area: media; align-self: start; }
.restaurant-page .rp-about { grid-area: about; align-self: start; }

.restaurant-page .rp-title { margin: 0 0 18px; font-size: 58px; font-weight: 600; line-height: 1.02; letter-spacing: -.035em; color: var(--navy, #182e50); }
.restaurant-page .rp-city { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--blue, #1c4e9d); }

.restaurant-page .rp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.restaurant-page .rp-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #e5edf6; color: #1e2f77; font-size: 13px; line-height: 1.3; }
.restaurant-page .rp-chips svg { width: 16px; height: 16px; }

.restaurant-page .button-row { margin: 0 0 26px; }

.restaurant-page .hours-panel.rp-visit { margin: 0; padding: 4px 22px; border: 1px solid var(--line, #d6dde6); border-radius: 18px; background: #fff; box-shadow: none; }
.restaurant-page .rp-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid #e6ebf1; }
.restaurant-page .rp-row:first-child { border-top: 0; }
.restaurant-page .rp-row > svg { width: 22px; height: 22px; margin-top: 1px; color: var(--blue, #1c4e9d); }
.restaurant-page .rp-visit h2 { margin: 0 0 4px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: #5f7a9c; }
.restaurant-page .rp-row p { margin: 0; font-size: 16px; line-height: 1.5; color: #1e2f77; overflow-wrap: anywhere; }
.restaurant-page .rp-hours > div > p { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.restaurant-page .rp-hours > div > p > span:first-child { min-width: 84px; }
.restaurant-page .rp-row a { font-size: 16px; color: var(--blue, #1c4e9d); text-decoration: underline; text-underline-offset: 3px; }
.restaurant-page .rp-row .accordion { margin-top: 10px; }
.restaurant-page .rp-row .fine-print { margin: 8px 0 0; font-size: 12px; color: #6b7c93; }


.restaurant-page .rp-media { overflow: hidden; border-radius: 18px; background: #e4edf5; }
.restaurant-page .rp-media > img { display: block; width: 100%; height: auto; max-height: none; margin: 0; border-radius: 0; object-fit: contain; }

.restaurant-page .rp-about > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f7a9c; }
.restaurant-page .rp-about p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #4a5d75; }

@media (max-width: 860px) {
  .restaurant-page .rp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'media' 'info' 'about'; grid-template-rows: none; row-gap: 24px; margin-top: 18px; }
  .restaurant-page .rp-title { font-size: 42px; }
  .restaurant-page .button-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .restaurant-page .button-row > * { width: 100%; justify-content: center; }
  /* 4:3 frame. Framed photos use the same building framing as the restaurant cards (finder-cards.css),
     with --frame = frame height / width. */
  .restaurant-page .rp-media { --frame: .75; position: relative; aspect-ratio: 4 / 3; }
  .restaurant-page .rp-media > img { height: 100%; object-fit: cover; }
  .restaurant-page .rp-media.is-framed > img {
    --z: clamp(1, 0.84 * var(--frame) / (1.25 * var(--s)), 1.5);
    position: absolute;
    max-width: none;
    width: calc(var(--z) * 100%);
    height: auto;
    left: clamp(calc((1 - var(--z)) * 100%), calc((0.5 - var(--x) * var(--z)) * 100%), 0%);
    top: clamp(calc((1 - 1.25 * var(--z) / var(--frame)) * 100%), calc((0.5 - var(--c) * 1.25 * var(--z) / var(--frame)) * 100%), 0%);
  }
}
@media (max-width: 600px) {
  .restaurant-page .rp-title { font-size: 36px; }
  .restaurant-page .hours-panel.rp-visit { padding: 2px 16px; }
}
.restaurant-page .rp-row .accordion { border: 0; }
.restaurant-page .rp-row .accordion summary { padding: 6px 0; font-size: 15px; font-weight: 500; color: #1e2f77; }
.restaurant-page .rp-row .accordion dl { margin: 6px 0 0; font-size: 14px; }
.restaurant-page .rp-welcome { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue, #1c4e9d); }
.restaurant-page .rp-season { margin: 0 0 2px; font-size: 13px !important; font-weight: 600; color: #1c4e9d !important; }
.restaurant-page .rp-hours-more { padding: 4px 0 2px; }
.restaurant-page .rp-hours-more > p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 15px; line-height: 1.5; color: #1e2f77; }
.restaurant-page .rp-hours-more > p > span:first-child { min-width: 84px; }
.restaurant-page .rp-hours-more > p.rp-season { display: block; }