/* =================================================================
   Home page sections, in page order:
     hero → department ticker → departments (receipt) → fresh →
     savings → visit → FAQ
   Shared pieces (header, ticker, receipt, department card, CTA,
   footer…) live in css/components/.
   ================================================================= */

/* ─────────────────────────── Hero ─────────────────────────── */
/* Headline beside the campaign photo in the logo's bag shape.
   Phones: stacked and centred, headline first. Tablets up: side by side. */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 3.2rem 4.8rem;
  background: linear-gradient(to bottom, var(--color-paper), var(--color-mist));
}

.hero__container {
  display: grid;
  gap: 3.2rem;
  align-items: center;
}

.hero__content { text-align: center; }

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
  padding: 0.6rem 1.4rem 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-teal-mist);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-teal-deep);
}

.hero__location-icon { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }

.hero__title {
  margin-bottom: 2rem;
  font-size: var(--text-display);
  font-weight: var(--font-weight-black);
  line-height: 1.5;
}

/* Each half of the slogan on its own line, like the poster */
.hero__title-line { display: block; }

.hero__text {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.8rem;
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-soft);
}

/* Phones: both buttons share one row, each growing from its own width.
   Slimmer side padding and, below 390px, no decorative forward arrow keep
   both labels on one line down to 360px (Arabic: 320px); on anything
   narrower a label wraps inside its button rather than the buttons stacking. */
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.hero__action {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 1.2rem;
}

.hero__action-arrow { display: none; }

@media (min-width: 390px) {
  .hero__action-arrow { display: block; }
}

.hero__media {
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-raised);
}

.hero__image { object-position: 52% 40%; }

@media (min-width: 769px) {
  .hero { padding-block: 5.6rem 7.2rem; }

  .hero__content { text-align: start; }

  .hero__text { margin-inline: 0; margin-bottom: 3.2rem; font-size: var(--text-md); }

  .hero__actions { flex-wrap: wrap; justify-content: flex-start; gap: 1.2rem; }
  .hero__action { flex: 0 0 auto; padding-inline: 2.4rem; }

  .hero__container {
    grid-template-columns: 1fr 1.1fr;
    gap: 4.8rem;
  }

  .hero__media { aspect-ratio: 3 / 2.4; }
}

@media (min-width: 1201px) {
  .hero__container { grid-template-columns: 1fr 1.2fr; gap: 6.4rem; }
  .hero__media { aspect-ratio: 3 / 2.2; }
}

/* ─────────────────────────── Departments (receipt) ─────────────────────────── */
/* Heading, checkout photo and "all departments" button beside the receipt
   of all departments. Laptops: the whole intro column, button included,
   stays in view while the receipt scrolls past. */

.departments__layout {
  display: grid;
  gap: 4rem;
}

/* Phones: the intro is centred, so the button sits in the middle under the photo */
.departments__intro { text-align: center; }

.departments__header { margin-bottom: 3.2rem; }

.departments__media { aspect-ratio: 16 / 9; }
.departments__image { object-position: 60% 50%; }

.departments__action { margin-top: 2.4rem; }

@media (min-width: 769px) {
  .departments__intro { text-align: start; }
}

@media (min-width: 992px) {
  .departments__layout {
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 6.4rem;
  }

  /* align-self: start keeps the intro its own height inside a grid area as
     tall as the receipt, which is the room position: sticky travels in. */
  .departments__intro { align-self: start; }

  /* A wider crop of the panorama keeps the column short enough to stay whole on screen */
  .departments__media { aspect-ratio: 21 / 9; }
}

/* Sticky only when the window is tall enough to show the whole intro
   (up to ~810px with the English copy); on shorter screens the button
   would sit below the fold until the receipt ended */
@media (min-width: 992px) and (min-height: 820px) {
  .departments__intro {
    position: sticky;
    top: calc(var(--header-height) + 3.2rem);
  }
}

/* ─────────────────────────── Fresh ─────────────────────────── */

.fresh__list { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); }

@media (min-width: 769px) {
  .fresh__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1201px) {
  .fresh__list { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────── Savings ─────────────────────────── */
/* Dark section: the receipt trolley photo beside three ways the shop
   keeps the bill down, and the social accounts where offers appear. */

.savings { position: relative; overflow: hidden; }

/* Torn-receipt edge: the section above hangs into this one as teeth
   (its background is the --alt tint of the fresh section) */
.savings::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1rem;
  background: conic-gradient(from -45deg at 50% 100%, var(--color-bg-alt) 90deg, transparent 0) 50% 0 / 2rem 1rem repeat-x;
}

.savings__container {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.savings__media { aspect-ratio: 1 / 1; max-width: 52rem; width: 100%; margin-inline: auto; }

/* Shared section-intro styles, but the full column width and no bottom
   margin: the points below keep their own spacing */
.savings__header { max-width: none; margin-bottom: 0; }

.savings__title { color: var(--color-paper); }

.savings__points {
  display: grid;
  gap: 2rem;
  margin-block: 3.2rem;
}

.savings__point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: start;
}

.savings__point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--radius-md);
  background: rgb(var(--color-amber-rgb) / 0.14);
  color: var(--color-amber);
}

.savings__point-icon svg { width: 2.4rem; height: 2.4rem; }

.savings__point-title {
  margin-bottom: 0.4rem;
  font-size: var(--text-md);
  color: var(--color-paper);
}

.savings__point-text { font-size: var(--text-sm); line-height: 1.8; color: rgb(255 255 255 / 0.76); }

/* "Follow our offers" line and social buttons: centred on phones */
.savings__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid rgb(255 255 255 / 0.16);
  text-align: center;
}

.savings__follow-text { font-size: var(--text-sm); color: rgb(255 255 255 / 0.86); }
.savings__handle { font-weight: var(--font-weight-bold); color: var(--color-amber); }

.savings__social { color: var(--color-paper); }

@media (min-width: 769px) {
  .savings__container { grid-template-columns: 0.9fr 1.1fr; gap: 5.6rem; }

  .savings__follow { justify-content: flex-start; text-align: start; }
}

/* ─────────────────────────── Visit ─────────────────────────── */

.visit__container {
  display: grid;
  gap: 4rem;
  align-items: center;
}

/* Shared section-intro styles, but the full column width and no bottom
   margin: the details below keep their own spacing */
.visit__header { max-width: none; margin-bottom: 0; }

.visit__details {
  display: grid;
  gap: 1.6rem;
  margin-block: 2.8rem 3.2rem;
}

.visit__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.4rem;
  padding: 1.6rem;
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.visit__detail-icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--color-teal-mist);
  color: var(--color-teal-deep);
}

.visit__detail-icon svg { width: 2rem; height: 2rem; }

.visit__term {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.visit__description { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: 1.7; }

/* Directions button and map link: centred on phones */
.visit__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.4rem;
}

@media (min-width: 769px) {
  .visit__actions { justify-content: flex-start; }
}

@media (min-width: 992px) {
  .visit__container { grid-template-columns: 1fr 1.1fr; gap: 6.4rem; }
}

/* ─────────────────────────── FAQ ─────────────────────────── */
/* Native <details name="faq">: one answer open at a time in browsers
   that support exclusive accordions, independent ones elsewhere. */

.faq__layout {
  display: grid;
  gap: 3.2rem;
}

/* Phones: heading, text and "Contact us" centred above the questions */
.faq__intro { text-align: center; }

.faq__intro-text { margin-bottom: 2.4rem; }

@media (min-width: 769px) {
  .faq__intro { text-align: start; }
}

.faq__list { display: grid; gap: 1.2rem; }

.faq__item {
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.faq__item[open] { border-color: var(--color-teal); box-shadow: var(--shadow-soft); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 6.4rem;
  padding: 1.4rem 2rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:focus-visible { border-radius: var(--radius-md); }

.faq__icon {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--color-teal-mist);
  color: var(--color-teal-deep);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.faq__item[open] .faq__icon { background: var(--color-amber); color: var(--color-ink); transform: rotate(45deg); }

.faq__answer {
  padding: 0 2rem 2rem;
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text-soft);
}

.faq__answer a { color: var(--color-link); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 0.3rem; }

@media (min-width: 992px) {
  .faq__layout { grid-template-columns: 0.8fr 1.2fr; gap: 6.4rem; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-height) + 3.2rem); }
}