/*
 * Template — Amber Atelier.
 *
 * A light, mobile-first "app column": the whole menu sits in one centred paper
 * sheet, the hero photo runs edge to edge with the content sheet curving over
 * it, and every course is a soft white card. Colours, fonts and spacing still
 * come from the site's own settings — this file only changes the arrangement.
 */

.qrm-site--tpl-atelier {
  /* The header bar is absolutely positioned over the hero, so the sheet has to
     be its containing block — without this it would escape to the viewport. */
  position: relative;
  padding-bottom: 0;
  /* A slightly darker stage so the sheet reads as a sheet on desktop, over
     the shell's backdrop (image + "Backdrop darkening"; the preset's 100%
     covers the image completely). */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    linear-gradient(
      rgba(var(--qrm-background-rgb), var(--qrm-backdrop-overlay)),
      rgba(var(--qrm-background-rgb), calc(var(--qrm-backdrop-overlay) + 0.06))
    ),
    var(--qrm-backdrop-image);
  background-attachment: scroll, scroll, var(--qrm-backdrop-attach);
}

/*
 * The centred sheet. Each block is named explicitly rather than using `> *`:
 * a universal selector also overrode the backgrounds those blocks set for
 * themselves, which turned the brand footer the same colour as the page.
 */
.qrm-site--tpl-atelier > .qrm-topbar,
.qrm-site--tpl-atelier > .qrm-hero,
.qrm-site--tpl-atelier > .qrm-site__body,
.qrm-site--tpl-atelier > .qrm-brandfoot {
  width: min(100%, var(--qrm-container));
  margin-inline: auto;
}

.qrm-site--tpl-atelier > .qrm-site__body {
  background: var(--qrm-surface);
}

/* The shell already paints this in the accent colour — keep it that way. */
.qrm-site--tpl-atelier > .qrm-brandfoot {
  background: var(--qrm-accent);
}

@media (min-width: 36rem) {
  .qrm-site--tpl-atelier {
    padding: 1.75rem 0 2.5rem;
  }

  .qrm-site--tpl-atelier > .qrm-hero {
    border-radius: 2.25rem 2.25rem 0 0;
  }

  /* Whichever block closes the sheet gets the bottom curve. */
  .qrm-site--tpl-atelier.has-brand-footer > .qrm-brandfoot,
  .qrm-site--tpl-atelier.no-brand-footer > .qrm-site__body {
    border-radius: 0 0 2.25rem 2.25rem;
  }

  .qrm-site--tpl-atelier > .qrm-hero,
  .qrm-site--tpl-atelier > .qrm-site__body,
  .qrm-site--tpl-atelier > .qrm-brandfoot {
    box-shadow: 0 18px 50px rgba(45, 28, 15, 0.1);
  }
}

/* ---------------------------------------------------------------- top --- */

/*
 * Pinned over the hero and centred on the sheet. `left: 50%` plus the
 * translate keeps it aligned with the sheet at any viewport width — setting
 * width:100% here made it span the whole page.
 *
 * `top: auto` is deliberate. The stage has top padding on desktop, and an
 * absolutely positioned box resolves `top: 0` against the padding box — which
 * put the bar above the sheet entirely, its rounded corners floating over the
 * page background. `auto` keeps the bar at its static position, flush with the
 * top of the hero, whatever that padding happens to be.
 */
.qrm-site--tpl-atelier .qrm-topbar {
  position: absolute;
  z-index: 20;
  top: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(20, 13, 8, 0.6), transparent);
  border-bottom: 0;
  border-radius: 2.25rem 2.25rem 0 0;
  box-shadow: none !important;
  backdrop-filter: none;
}

@media (max-width: 35.999rem) {
  .qrm-site--tpl-atelier .qrm-topbar { border-radius: 0; }
}

.qrm-site--tpl-atelier .qrm-topbar__inner {
  min-height: 4.9rem;
  padding-block: 1.1rem;
}

/* Height comes from the setting; the template only adds the lift. */
.qrm-site--tpl-atelier .qrm-topbar__logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

.qrm-site--tpl-atelier .qrm-topbar__label,
.qrm-site--tpl-atelier .qrm-topbar__note {
  color: #fff;
}

.qrm-site--tpl-atelier .qrm-topbar__note { opacity: 0.72; }

.qrm-site--tpl-atelier .qrm-topbar__badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------- hero --- */

/* The hero is the sheet's own first block, so the top bar can float over it. */
.qrm-site--tpl-atelier .qrm-hero {
  position: relative;
  align-items: flex-end;
  padding: 6.2rem var(--qrm-page-padding) 2.6rem;
  background-color: var(--qrm-text);
}

.qrm-site--tpl-atelier .qrm-hero--image {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, 0.1) 25%, rgba(20, 12, 6, calc(0.55 + var(--qrm-hero-overlay) * 0.5)) 100%),
    var(--qrm-hero-image);
}

.qrm-site--tpl-atelier .qrm-hero__title {
  max-width: 26rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-shadow: none;
}

.qrm-site--tpl-atelier .qrm-hero__tagline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  order: -1;
  margin: 0 0 0.85rem;
  color: #fff;
}

.qrm-site--tpl-atelier .qrm-hero--align-center .qrm-hero__tagline { justify-content: center; }

.qrm-site--tpl-atelier .qrm-hero__inner {
  display: flex;
  flex-direction: column;
}

.qrm-site--tpl-atelier .qrm-hero__subtitle {
  max-width: 23rem;
  margin-top: 1.25rem;
  line-height: 1.7;
}

/* -------------------------------------------------------------- sheet --- */

/* Content curves over the bottom of the hero photo. */
.qrm-site--tpl-atelier .qrm-site__body {
  position: relative;
  gap: var(--qrm-gap);
  padding: 0 0 3rem;
  margin-top: -1.9rem;
  border-radius: 1.9rem 1.9rem 0 0;
  background: var(--qrm-surface);
}

/*
 * Sections sit flat on the sheet. Card padding, corner radius, card border
 * (Design tab) and the ribbon ornament still apply — the border and the
 * ornament come from the shell, so this rule must not reset them.
 */
.qrm-site--tpl-atelier .qrm-card {
  padding: var(--qrm-card-padding) var(--qrm-page-padding) calc(var(--qrm-card-padding) * 0.3);
  background-color: transparent;
  border-radius: var(--qrm-radius);
  box-shadow: none;
  text-align: left;
}

/* A bordered section is inset from the sheet's edges so its frame shows. */
.qrm-site--tpl-atelier.has-card-border .qrm-card {
  margin-inline: var(--qrm-page-padding);
  padding: calc(var(--qrm-card-padding) * 0.75);
}

.qrm-site--tpl-atelier .qrm-card__title {
  margin: 0.35rem 0 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.qrm-site--tpl-atelier .qrm-card__text,
.qrm-site--tpl-atelier .qrm-card__meta {
  max-width: none;
  margin-inline: 0;
  color: var(--qrm-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.qrm-site--tpl-atelier .qrm-card__text { margin-top: 0.8rem; }

.qrm-site--tpl-atelier .qrm-eyebrow {
  justify-content: flex-start;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
}

.qrm-site--tpl-atelier .qrm-links {
  justify-content: flex-start;
  margin-top: 1.15rem;
}

.qrm-site--tpl-atelier .qrm-links__item {
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------- schedule --- */

.qrm-site--tpl-atelier .qrm-schedule > div {
  border-bottom-color: var(--qrm-border);
}

/* ------------------------------------------------------ category rail --- */

.qrm-site--tpl-atelier .qrm-tools {
  padding: 0.7rem var(--qrm-page-padding) 0.8rem;
  background: rgba(var(--qrm-surface-rgb), calc(0.95 * var(--qrm-surface-a, 1)));
  border-bottom: 1px solid var(--qrm-border);
}

/* The Atelier header floats over the hero rather than sticking, so the tools
   strip owns the top of the viewport on its own. */
.qrm-site--tpl-atelier.has-topbar .qrm-tools { top: 0; }

.qrm-site--tpl-atelier .qrm-search__input {
  background: #fff;
  border-radius: 999px;
}

.qrm-site--tpl-atelier .qrm-catnav__item {
  color: var(--qrm-text);
  background: var(--qrm-surface);
  border-color: var(--qrm-border);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.qrm-site--tpl-atelier .qrm-catnav__item.is-active {
  color: var(--qrm-surface);
  background: var(--qrm-text);
  border-color: var(--qrm-text);
}

/* ---------------------------------------------------------- menu list --- */

.qrm-site--tpl-atelier .qrm-menu .primary_type,
.qrm-site--tpl-atelier .qrm-menu .menu_type_title,
.qrm-site--tpl-atelier .qrm-menu h2.fp_cat_title {
  margin: 1.4rem 0 0.9rem;
  padding: 0 2.4rem 0 0;
  color: var(--qrm-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em;
}

/* With a category divider (Design tab) the rules need room from the text. */
.qrm-site--tpl-atelier:not(.qrm-site--divider-none) .qrm-menu .primary_type,
.qrm-site--tpl-atelier:not(.qrm-site--divider-none) .qrm-menu .menu_type_title {
  margin-block: 0.85rem;
  padding-block: 0.45rem;
}

/* The shell's rules are drawn in the accent at up to 50%; on the pale
   Atelier sheet a softer hairline reads better. */
.qrm-site--tpl-atelier:not(.qrm-site--divider-none) .qrm-menu .primary_type {
  border-color: rgba(var(--qrm-accent-rgb), 0.24);
}

.qrm-site--tpl-atelier .qrm-menu .mt_description,
.qrm-site--tpl-atelier .qrm-menu .fp_cat_des {
  margin-bottom: 0.9rem;
  font-style: normal;
  font-size: 0.82rem !important;
}

/* Item structure lives in items.css; the skin only hands it a look. */
.qrm-site--tpl-atelier {
  --qrm-item-bg: var(--qrm-surface);
  --qrm-item-border: var(--qrm-border);
  --qrm-thumb-size: 5.2rem;
  --qrm-thumb-radius: 1.1rem;
  /* "Item shadow" switches between this soft lift and none. */
  --qrm-item-card-shadow: 0 8px 24px rgba(45, 28, 15, 0.055);
}

.qrm-site--tpl-atelier.no-item-shadow { --qrm-item-card-shadow: none; }

.qrm-site--tpl-atelier .qrm-menu .menu_info h3,
.qrm-site--tpl-atelier .qrm-menu .fp_inner_box > h3,
.qrm-site--tpl-atelier .qrm-menu .fp_title {
  margin: 0 0 0.35rem !important;
  font-family: var(--qrm-font-body) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.qrm-site--tpl-atelier .qrm-menu .fp_subheader,
.qrm-site--tpl-atelier .qrm-menu .menu_description,
.qrm-site--tpl-atelier .qrm-menu .fp_excerpt {
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

.qrm-site--tpl-atelier .qrm-menu .fp_price,
.qrm-site--tpl-atelier .qrm-menu .fp_price_wrap {
  font-size: 0.85rem !important;
}

/* ---------------------------------------------------------------- end --- */

.qrm-site--tpl-atelier .qrm-note {
  margin: 1.25rem var(--qrm-page-padding) 0;
  border-radius: var(--qrm-item-radius);
}

.qrm-site--tpl-atelier .qrm-site__footer {
  padding-inline: var(--qrm-page-padding);
}

.qrm-site--tpl-atelier .qrm-brandfoot {
  margin-top: 0;
  padding-block: 2.6rem;
}