/*
 * Shannan Group — Signature 11 · Polish layer
 * Loaded last. Refines spacing, uses the empty halves of page headers, balances
 * the picture/video galleries, adds a lightbox and calmer, richer motion.
 * Every rule uses the theme tokens, so light/dark mode and the
 * «المظهر ← تصميم شنّان» settings keep working.
 */

/* ------------------------------------------------------------------ */
/* 0. Rhythm & small details                                           */
/* ------------------------------------------------------------------ */
:root {
  --sg-section-y: clamp(52px, 6.4vw, 96px);
  --sg-v11-ring: 0 0 0 1px color-mix(in srgb, var(--sg-gold) 38%, transparent);
  --sg-v11-gold-icon-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c48c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
  --sg-v11-gold-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c48c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  --sg-v11-gold-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c48c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --sg-v11-gold-icon-team: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c48c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
html { scroll-behavior: smooth; }
::selection { color: #fff; background: color-mix(in srgb, var(--sg-forest) 88%, var(--sg-gold)); }
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--sg-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.sg-page-main .sg-section-title { text-wrap: balance; }
.sg-page-main :is(.sg-section-lead, .sg-page-lead, .sg-card-copy) { text-wrap: pretty; }

/* The hero proof line only repeated the three check lines of «نبذة عن شركة شنّان». */
.sg-home-hero .sg-hero-proof { display: none !important; }

/* ------------------------------------------------------------------ */
/* 1. Page headers use their empty half (About, Trade, Contact, Jobs) */
/* ------------------------------------------------------------------ */
@media (min-width: 901px) {
  body.page:not(.home):not(.page-id-52):not(.page-location):not(:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234)) .sg-page-main:has(.sg-page-intro) {
    --sg-v11-panel-icon: var(--sg-v11-gold-icon-leaf);
  }
  body:is(.page-import-export, .page-id-227) .sg-page-main { --sg-v11-panel-icon: var(--sg-v11-gold-icon-globe) !important; }
  body:is(.page-contact, .page-id-229) .sg-page-main { --sg-v11-panel-icon: var(--sg-v11-gold-icon-mail) !important; }
  body:is(.page-careers, .page-id-228) .sg-page-main { --sg-v11-panel-icon: var(--sg-v11-gold-icon-team) !important; }

  body.page:not(.home):not(.page-id-52):not(.page-location):not(:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234)) .sg-page-main:has(.sg-page-intro) > .sg-page-title-wrap,
  body.page:not(.home):not(.page-id-52):not(.page-location):not(:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234)) .sg-page-main .sg-page-intro .sg-container {
    padding-inline-end: min(42%, 520px);
  }
  body.page:not(.home):not(.page-id-52):not(.page-location):not(:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234)) .sg-page-main:has(.sg-page-intro) .sg-page-intro { min-height: 300px; }

  /* Brand panel in place of the empty ring */
  body.page:not(.home):not(.page-id-52):not(.page-location):not(:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234)) .sg-page-main:has(.sg-page-intro)::before {
    position: absolute;
    z-index: 0;
    top: clamp(34px, 4vw, 56px);
    left: max(var(--sg-gutter), calc((100% - var(--sg-container)) / 2));
    width: min(36%, 440px);
    aspect-ratio: 1.3;
    border-radius: 28px 110px 28px 28px;
    content: "";
    pointer-events: none;
    background:
      var(--sg-v11-panel-icon) center / 38% no-repeat,
      radial-gradient(circle at 50% 50%, transparent 0 33%, color-mix(in srgb, var(--sg-gold) 22%, transparent) 33.2% 33.6%, transparent 34% 44%, color-mix(in srgb, var(--sg-gold) 12%, transparent) 44.2% 44.5%, transparent 45%),
      radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--sg-leaf) 40%, transparent), transparent 60%),
      linear-gradient(150deg, var(--sg-forest) 0%, var(--sg-forest-deep) 100%);
    box-shadow: 0 0 0 7px var(--sg-card), 0 0 0 8px color-mix(in srgb, var(--sg-gold) 45%, transparent), var(--sg-shadow-lg);
    animation: sg-cover-in 1.1s var(--sg-ease-out) .15s both;
    translate: 0 var(--sg-v11-cover-y, 0px);
  }
  body.page:not(.home):not(.page-id-52):not(.page-location) .sg-page-main:has(.sg-page-intro)::after { opacity: .5; }
  :root[data-theme="dark"] body.page .sg-page-main:has(.sg-page-intro)::before { box-shadow: 0 0 0 7px var(--sg-card-raised), 0 0 0 8px color-mix(in srgb, var(--sg-gold) 45%, transparent), var(--sg-shadow-lg); }

  /* Sector covers drift slightly with scrolling */
  body:is(.page-mothers, .page-id-230, .page-feed-mill, .page-id-231, .page-layers, .page-id-232, .page-poultry-farms, .page-id-233, .page-automated-slaughterhouse, .page-id-234) .sg-page-main::before {
    translate: 0 var(--sg-v11-cover-y, 0px);
  }
}

/* ------------------------------------------------------------------ */
/* 2. Heading + long text side by side (uses the full width)           */
/* ------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .sg-page-main .sg-section:not(.sg-page-intro):not(.sg-media-gallery-section) > .sg-container:has(> .sg-section-title + .sg-section-lead:last-child):not(:has(.sg-card-grid, .sg-media-grid, .sg-activity-grid)) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
  }
  .sg-page-main .sg-section:not(.sg-page-intro):not(.sg-media-gallery-section) > .sg-container:has(> .sg-section-title + .sg-section-lead:last-child):not(:has(.sg-card-grid, .sg-media-grid, .sg-activity-grid)) > .sg-section-title {
    position: sticky;
    top: 120px;
    margin: 0;
    padding-top: .4rem;
  }
  .sg-page-main .sg-section:not(.sg-page-intro):not(.sg-media-gallery-section) > .sg-container:has(> .sg-section-title + .sg-section-lead:last-child):not(:has(.sg-card-grid, .sg-media-grid, .sg-activity-grid)) > .sg-section-lead {
    max-width: none;
    margin: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Cards                                                            */
/* ------------------------------------------------------------------ */
.sg-card .sg-text-link a span { transition: transform 400ms var(--sg-ease); }
.sg-card:hover .sg-text-link a span { transform: translateX(-4px); }

/* Card grids never leave a lonely card on the last row (wide screens) */
@media (min-width: 1081px) {
  .sg-page-main :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])),
  .sg-main-content :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  :is(.sg-page-main, .sg-main-content) :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])) > * { grid-column: span 2; }
  /* 2, 5, 8… cards: the last two share the row */
  :is(.sg-page-main, .sg-main-content) :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2) { grid-column: span 3; }
  /* 4, 7, 10… cards: the last four become two rows of two */
  :is(.sg-page-main, .sg-main-content) :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])):has(> :last-child:nth-child(3n + 4)) > :nth-last-child(-n + 4) { grid-column: span 3; }
  /* a single card stays centred */
  :is(.sg-page-main, .sg-main-content) :is(.sg-activity-grid, .sg-card-grid:not([style*="flex"])) > :only-child { grid-column: 2 / span 4; }
}

/* Home activity cards: calmer picture proportion */
@media (min-width: 783px) {
  .sg-activity-card .sg-activity-image { aspect-ratio: 4 / 3 !important; height: auto !important; }
}
.sg-activity-card .sg-activity-image :is(img, video, iframe) { width: 100% !important; height: 100% !important; object-fit: cover; }
.sg-activity-card.sg-dash-card .sg-media-frame--video { aspect-ratio: 16 / 9; border-radius: inherit; }
.sg-activity-card.sg-dash-card .sg-media-frame--video[data-sg-media-ratio="portrait"] { aspect-ratio: 4 / 5; }
.sg-activity-card.sg-dash-card .sg-media-frame--video :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* ------------------------------------------------------------------ */
/* 4. Balanced galleries (layout decided in assets/js/v11.js)          */
/* ------------------------------------------------------------------ */
.sg-page-main .sg-media-gallery-section .sg-media-grid.sg-v11-grid,
.sg-main-content .sg-media-gallery-section .sg-media-grid.sg-v11-grid { gap: clamp(14px, 1.8vw, 24px); }

/* WordPress adds a top margin to every block after the first; inside a grid that misaligns the row. */
body .sg-media-gallery-section .sg-media-grid > * { margin-block: 0 !important; }

@media (min-width: 783px) {
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card {
    grid-column: span var(--sg-span, 6) !important;
    align-self: stretch !important;
    height: 100% !important;
  }
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card[data-sg-start] {
    grid-column: var(--sg-start) / span var(--sg-span, 4) !important;
  }
  /* Pictures beside a tall video stretch to the video's height */
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card[data-sg-fill] > .sg-media-frame--image {
    position: relative !important;
    flex: 1 1 auto;
    min-height: 280px !important;
    aspect-ratio: auto !important;
  }
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card[data-sg-fill] > .sg-media-frame--image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card[data-sg-span="12"]:not([data-sg-fill]) > .sg-media-frame--image { aspect-ratio: 21 / 9 !important; }
}
body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card:not([data-sg-fill]) > .sg-media-frame--image { aspect-ratio: 4 / 3 !important; }
body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card:not([data-sg-fill]) > .sg-media-frame--image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
body .sg-media-gallery-section .sg-media-grid.sg-v11-grid > .sg-media-card .sg-media-frame--image :is(figure, .wp-block-image) { height: 100%; }
body .sg-media-gallery-section .sg-media-grid > .sg-media-card .sg-media-frame--video[data-sg-media-ratio="landscape"] { aspect-ratio: 16 / 9 !important; }
body .sg-media-gallery-section .sg-media-grid > .sg-media-card .sg-media-frame--video video { object-fit: contain; background: #000; }
body .sg-media-gallery-section .sg-media-grid > .sg-media-card { border-radius: var(--sg-radius-lg); }
body .sg-media-gallery-section .sg-media-grid > .sg-media-card > .sg-media-frame { border-radius: inherit; }
body .sg-media-gallery-section .sg-media-grid > .sg-media-card:has(.sg-dash-card__body) > .sg-media-frame { border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0; }

.sg-dash-card__body { padding: 14px 18px 18px; }
.sg-dash-card__body .sg-media-title { margin: 0 0 .3rem !important; }
.sg-dash-card__body .sg-media-caption { margin: 0 !important; }

/* Zoom affordance on pictures (opens the lightbox) */
[data-sg-zoom] { cursor: zoom-in; }
[data-sg-zoom]::after {
  position: absolute;
  z-index: 3;
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  content: "";
  background: color-mix(in srgb, var(--sg-forest-deep) 70%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 300ms ease, transform 400ms var(--sg-ease);
}
[data-sg-zoom]:hover::after,
[data-sg-zoom]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { [data-sg-zoom]::after { opacity: .9; transform: none; } }

/* ------------------------------------------------------------------ */
/* 5. Lightbox                                                         */
/* ------------------------------------------------------------------ */
.sg-lightbox {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: color-mix(in srgb, #04100b 90%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 320ms ease;
}
.sg-lightbox[hidden] { display: none; }
.sg-lightbox.is-open { opacity: 1; }
.sg-lightbox__figure { display: grid; justify-items: center; gap: 14px; margin: 0; min-width: 0; }
.sg-lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  transform: scale(.96);
  transition: transform 500ms var(--sg-ease-out), opacity 300ms ease;
}
.sg-lightbox.is-open .sg-lightbox__figure img { transform: none; }
.sg-lightbox__caption { max-width: 70ch; margin: 0; color: rgba(255, 255, 255, .86); font-size: .98rem; line-height: 1.8; text-align: center; }
.sg-lightbox__caption strong { display: block; color: #fff; font-family: var(--sg-font-heading); font-size: 1.1rem; }
.sg-lightbox__caption:empty { display: none; }
.sg-lightbox button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background 250ms ease, transform 300ms var(--sg-ease);
}
.sg-lightbox button:hover { background: rgba(255, 255, 255, .18); transform: scale(1.06); }
.sg-lightbox__close { position: absolute; top: clamp(12px, 2vw, 24px); inset-inline-end: clamp(12px, 2vw, 24px); }
.sg-lightbox__nav[hidden] { visibility: hidden; }
.sg-lightbox__count { position: absolute; top: clamp(20px, 2.6vw, 34px); inset-inline-start: clamp(16px, 2.4vw, 30px); color: rgba(255, 255, 255, .7); font-size: .9rem; }
body.sg-lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  .sg-lightbox { grid-template-columns: minmax(0, 1fr); }
  .sg-lightbox__nav { position: absolute; bottom: 18px; }
  .sg-lightbox__nav--prev { inset-inline-start: 18px; }
  .sg-lightbox__nav--next { inset-inline-end: 18px; }
}

/* ------------------------------------------------------------------ */
/* 6. Motion                                                           */
/* ------------------------------------------------------------------ */
@keyframes sg-v11-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sg-v11-page-out { to { opacity: 0; } }
@keyframes sg-v11-shine { from { transform: translateX(130%) skewX(-18deg); } to { transform: translateX(-230%) skewX(-18deg); } }

/* Softer, deeper reveal: a little blur that clears while the element rises */
.sg-motion-enabled .sg-reveal:where(:not(.sg-media-frame, .sg-activity-image, .sg-is-visible)) { filter: blur(5px); }
.sg-motion-enabled .sg-reveal { transition-property: opacity, transform, filter, border-color, box-shadow, background-color; }

/* Eyebrow pill slides in with its section */
.sg-motion-enabled .sg-section .sg-eyebrow { transition: letter-spacing 900ms var(--sg-ease-out); }

/* A light sweep across primary buttons */
:is(.sg-btn-primary .wp-block-button__link, .sg-v6-header-cta) { position: relative; overflow: hidden; isolation: isolate; }
:is(.sg-btn-primary .wp-block-button__link, .sg-v6-header-cta)::after {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 40%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(130%) skewX(-18deg);
  pointer-events: none;
}
:is(.sg-btn-primary .wp-block-button__link, .sg-v6-header-cta):hover::after { animation: sg-v11-shine 900ms var(--sg-ease-out); }
.sg-magnetic { translate: var(--sg-mx, 0) var(--sg-my, 0); transition: translate 400ms var(--sg-ease); }

/* Pages fade into each other (supported browsers only) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not(.sg-mode-switching)::view-transition-old(root) { animation: sg-v11-page-out 220ms ease both; }
  html:not(.sg-mode-switching)::view-transition-new(root) { animation: sg-v11-page-in 460ms var(--sg-ease-out) both; clip-path: none; }
  .sg-header-shell { view-transition-name: sg-header; }
}
::view-transition-group(sg-header) { animation-duration: 0s; }

.sg-disable-motion .sg-reveal { filter: none !important; }
.sg-disable-motion .sg-magnetic { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sg-reveal { filter: none !important; }
  .sg-magnetic { translate: none !important; }
  .sg-lightbox, .sg-lightbox__figure img { transition: none !important; }
}