/* ==========================================================================
   AL MOSTAQBAL FOODS — Page-specific bento composition helpers
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero (Home)                                                              */
/* ---------------------------------------------------------------------- */

.hero-cell {
  min-height: 420px;
}

.hero-display {
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.text-accent { color: var(--color-secondary-dark); }

.hero-cell .text-lead { max-width: 48ch; }

/* Single confident branded photo, replacing the earlier mosaic-of-tiles
   (too busy) and the floating white card (removed per feedback — reads
   as a disconnected sticker rather than part of the design). One strong
   image with a brand-teal duotone gradient reads as far more "designed"
   than several small catalog-style thumbnails, and the trust line now
   sits directly on the photo instead of floating in front of it. */
.hero-photo {
  position: relative;
  display: block;
  min-height: 460px;
  border-radius: var(--radius-cell);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.hero-photo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Fixed ambient slideshow — no arrows/dots/swipe by design. Every stacked
   image sits at opacity:0 until JS marks it active; a plain CSS
   transition handles the outgoing crossfade, while the incoming image
   plays one of several distinct keyframe animations so consecutive
   changes don't all look the same. All effects are scale/opacity/blur
   only (no horizontal movement), so nothing needs RTL mirroring. */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
}

.hero-slide.is-active { opacity: 1; z-index: 1; }

.hero-slide.is-entering {
  z-index: 2;
  transition: none;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.hero-slide.is-entering.t-fade { animation-name: heroSlideFade; }
.hero-slide.is-entering.t-zoom { animation-name: heroSlideZoom; }
.hero-slide.is-entering.t-up { animation-name: heroSlideUp; }
.hero-slide.is-entering.t-down { animation-name: heroSlideDown; }
.hero-slide.is-entering.t-soft { animation-name: heroSlideSoft; }

@keyframes heroSlideFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heroSlideZoom {
  from { opacity: 0; transform: scale(1.15); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(5%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideDown {
  from { opacity: 0; transform: translateY(-5%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideSoft {
  from { opacity: 0; filter: blur(14px); transform: scale(1.04); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(165deg, rgba(10, 42, 50, 0.08) 0%, rgba(10, 42, 50, 0.38) 55%, rgba(8, 33, 39, 0.9) 100%);
}

.hero-photo__overlay {
  position: absolute;
  inset-inline: var(--space-6);
  inset-block-end: var(--space-6);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-photo__tagline {
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: var(--text-small);
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .hero-photo { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-entering { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Teaser cells (Home → Products / Services)                               */
/* ---------------------------------------------------------------------- */

.teaser-cell {
  gap: var(--space-4);
}

.teaser-cell__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.teaser-cell .link-arrow { margin-block-start: auto; }

/* ---------------------------------------------------------------------- */
/* Values / Why-choose-us small square cells                               */
/* ---------------------------------------------------------------------- */

.value-cell {
  min-height: 190px;
  gap: var(--space-4);
}

.value-cell .icon-chip { margin-inline-end: auto; }
html[dir="rtl"] .value-cell .icon-chip { margin-inline-end: 0; margin-inline-start: auto; }

/* ---------------------------------------------------------------------- */
/* Process steps (Services)                                                */
/* ---------------------------------------------------------------------- */

.process-step { min-height: 210px; }

.process-step__num {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-5);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.cell--primary .process-step__num { color: var(--color-on-primary); opacity: 0.16; }

/* ---------------------------------------------------------------------- */
/* Product category cells                                                  */
/* ---------------------------------------------------------------------- */

.product-cell { min-height: 230px; }
.product-cell--hero { min-height: 320px; justify-content: flex-end; }

/* ---------------------------------------------------------------------- */
/* Contact page                                                            */
/* ---------------------------------------------------------------------- */

.contact-detail-cell { gap: var(--space-2); }
.contact-detail-cell .icon-chip { margin-block-end: var(--space-2); }
.contact-detail-cell a,
.contact-detail-cell p { font-size: var(--text-small); color: var(--color-text-muted); }
.contact-detail-cell a:hover { color: var(--color-primary); }

.map-embed {
  justify-content: flex-start;
  gap: var(--space-3);
}

.map-embed__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.map-embed iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  border: 0;
  border-radius: var(--radius-tag);
  display: block;
}

/* Explicit split layout: contact form (tall, left/start column) beside a
   stacked column of detail cells (address, phone, email, hours, map). */
.contact-form-cell { grid-column: 1 / span 7; grid-row: 1 / span 5; }
.contact-detail-1 { grid-column: 8 / span 5; grid-row: 1; }
.contact-detail-2 { grid-column: 8 / span 5; grid-row: 2; }
.contact-detail-3 { grid-column: 8 / span 5; grid-row: 3; }
.contact-detail-4 { grid-column: 8 / span 5; grid-row: 4; }
.contact-detail-5 { grid-column: 8 / span 5; grid-row: 5; }

@media (max-width: 1199px) {
  .contact-form-cell { grid-column: 1 / span 8; grid-row: auto; }
  .contact-detail-1, .contact-detail-2, .contact-detail-3,
  .contact-detail-4, .contact-detail-5 { grid-column: span 4; grid-row: auto; }
}

@media (max-width: 767px) {
  .contact-form-cell,
  .contact-detail-1, .contact-detail-2, .contact-detail-3,
  .contact-detail-4, .contact-detail-5 { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------------------------------------------------------------------- */
/* Supplier submission list                                                */
/* ---------------------------------------------------------------------- */

.field-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.field-pill {
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.cell--primary .field-pill,
.cell--tertiary .field-pill {
  background: rgba(247,243,236,0.1);
  border-color: var(--color-on-primary-border);
  color: var(--color-on-primary-muted);
}