/* ==========================================================================
   Divine Foodz — tablet and mobile layouts
   Tablet  = Figma "Tablet 800" frames  → applies at 1024px and below
   Mobile  = Figma "Mobile 375" frames  → applies at 600px and below
   (Mobile rules build on top of the tablet rules.)
   ========================================================================== */

/* ---------- TABLET ------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Page frame: 40px side gutters (Figma 800 → 720 content) */
	html body { --wp--style--root--padding-left: 40px; --wp--style--root--padding-right: 40px; }

	/* Header: logo · hamburger · Request */
	.df-nav { min-height: 64px; padding: 8px 8px 8px 21px !important; gap: 20px; }
	.df-logo, .df-logo img { width: 71px !important; }
	.df-lang { display: none; }
	.df-nav > .df-menu { margin-left: auto !important; }
	.df-nav__actions { gap: 0; }
	.df-nav__cta .wp-block-button__link { padding: 14px 24px; font-size: 14px; }
	.df-menu .wp-block-navigation__responsive-container-open {
		display: block; width: 24px; height: 24px; padding: 0; color: transparent;
		background:
			linear-gradient(var(--df-ink), var(--df-ink)) center 5px / 19px 2px no-repeat,
			linear-gradient(var(--df-ink), var(--df-ink)) center 11px / 19px 2px no-repeat,
			linear-gradient(var(--df-ink), var(--df-ink)) center 17px / 19px 2px no-repeat;
	}
	.df-menu .wp-block-navigation__responsive-container-open svg { opacity: 0; }

	/* Full-screen menu (Figma "Menu — Tablet 800") */
	.df-menu .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--df-teal) !important; color: #fff !important; padding: 32px 40px;
	}
	.df-menu .wp-block-navigation__responsive-container.is-menu-open::before {
		content: ""; position: absolute; left: 40px; top: 32px; width: 167px; height: 72px;
		background: url(../images/logo-white.png) left top / contain no-repeat;
	}
	.df-menu .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 162px; align-items: flex-start !important; }
	.df-menu .is-menu-open .wp-block-navigation__container { gap: 28px !important; align-items: flex-start !important; }
	.df-menu .is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-size: 30px; line-height: 40px; font-weight: 500; padding: 0 !important; }
	.df-menu .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--df-sky) !important; }
	.df-menu .is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; top: 58px; right: 40px; }
	.df-menu .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }

	/* Hero */
	.df-hero.wp-block-cover { padding: 56px; }
	.df-hero__title { font-size: 56px !important; line-height: 60px !important; letter-spacing: -1.4px !important; }
	.df-hero__actions { flex-direction: column; align-items: flex-start; }

	/* 02 Operations */
	.df-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
	.df-card--tall { min-height: 257px; }

	/* 03 Positioning */
	.df-positioning { padding: 10px; }
	.df-two-col { grid-template-columns: 1fr; row-gap: 18px; margin-top: 20px !important; }
	.df-two-col p { max-width: 690px; }

	/* 04 Consolidation */
	.df-consolidation { grid-template-columns: 1fr; }
	.df-consolidation .df-panel { min-height: 0; gap: 0; }
	.df-consolidation .df-panel > .wp-block-buttons { margin-top: 28px !important; }

	/* 05 Range */
	.df-range-head { flex-direction: column; align-items: center !important; padding: 40px 8px 8px; gap: 40px; }
	.df-range-head__text { max-width: 596px; }
	.df-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 223px; padding-block: 0; }

	/* 06 Africa: photo + "Present in the market" card */
	.df-africa { display: flex; flex-direction: column; gap: 16px; }
	.df-wide-photo img { height: 487px; }
	.df-presence { display: flex; flex-direction: column; gap: 32px; padding: 56px; }
	.df-presence > * { margin: 0 !important; }
	.df-presence h2 { max-width: 375px; }
	.df-presence__text { margin-top: -12px !important; color: var(--df-mint); font-size: 18px; }

	/* 07 Delish: photo on top */
	.df-delish { flex-direction: column; align-items: center; gap: 27px; padding: 56px; }
	.df-delish__photo { order: -1; flex: none; width: 608px; max-width: 100%; height: 340px; }
	.df-delish__text { max-width: none; width: 100%; }

	/* 08 Why */
	.df-why { padding: 20px 0 0 8px; }
	.df-why > h2 { padding-inline: 0; }
	.df-why__grid { grid-auto-rows: 232px; padding-block: 0; }

	/* 09 CTA */
	.df-cta { padding: 90px 72px; }

	/* Footer (Figma tablet: 3 columns, 13px) */
	.df-footer { padding: 44px 42px 28px; gap: 0; }
	.df-footer__cols { grid-template-columns: 34.2% 29.2% 1fr; justify-content: stretch; gap: 0; }
	.df-footer__logo, .df-footer__logo img { width: 177px !important; }
	.df-footer__about p { margin-top: 26px !important; font-size: 13px; line-height: 20px; color: var(--df-mint); text-align: left; max-width: 220px; }
	.df-footer__list { font-size: 13px; line-height: 15px; gap: 14px; }
	.df-footer__list + .df-footer__list { color: var(--df-mint); }
	.df-footer__hours { display: list-item; }
	.df-footer__divider.wp-block-separator { margin-top: 34px !important; }
	.df-footer__legal { margin-top: 18px !important; font-size: 13px; line-height: 15px; color: var(--df-mint); }
}

/* ---------- MOBILE ------------------------------------------------------- */
@media (max-width: 600px) {

	/* Page frame: 20px side gutters (Figma 375 → 335 content) */
	html body { --wp--style--root--padding-left: 20px; --wp--style--root--padding-right: 20px; }
	:root { --df-r-xl: 32px; }

	/* Header */
	.df-site-header { top: 8px; }
	.df-nav { min-height: 58px; padding: 6px 12px 6px 17px !important; gap: 21px; }
	.df-nav__cta .wp-block-button__link { padding: 13px 18px; }

	/* Full-screen menu (Figma "Menu — Mobile 390") */
	.df-menu .wp-block-navigation__responsive-container.is-menu-open { padding: 42px 31px; }
	.df-menu .wp-block-navigation__responsive-container.is-menu-open::before { left: 31px; top: 42px; }
	.df-menu .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 158px; }
	.df-menu .is-menu-open .wp-block-navigation__container { gap: 18px !important; }
	.df-menu .is-menu-open .wp-block-navigation-item__content { font-size: 22px; line-height: 28px; }
	.df-menu .is-menu-open .wp-block-navigation__responsive-container-close { top: 54px; right: 31px; }

	/* Hero */
	.df-hero.wp-block-cover { padding: 56px 33px; }
	.df-hero__title { font-size: 40px !important; line-height: 44px !important; letter-spacing: -1px !important; }
	.df-hero .df-hero__lead { font-size: 20px; line-height: 27px; }

	/* Stacked cards */
	.df-ops, .df-services, .df-cats, .df-why__grid { grid-template-columns: 1fr; }
	.df-ops .df-card { padding: 36px 33px; }
	.df-card--tall { min-height: 0; gap: 40px; }

	/* 03 Positioning */
	.df-positioning { padding: 37px 0 34px 8px; }
	.df-two-col { margin-top: 36px !important; }

	/* 04 Consolidation */
	.df-consolidation .df-panel { padding: 48px 33px; }
	.df-consolidation .df-panel .wp-block-button,
	.df-consolidation .df-panel .wp-block-button__link { width: 100%; }

	/* 05 Range */
	.df-range-head__text { max-width: 271px; }
	.df-range-head__text h2 { font-size: 26px !important; line-height: 32px !important; letter-spacing: -.26px !important; }
	.df-range-head .wp-block-buttons, .df-range-head .wp-block-button, .df-range-head .wp-block-button__link { width: 100%; }

	/* 06 Africa */
	.df-wide-photo img { height: 222px; }
	.df-presence { padding: 56px 33px 38px; gap: 29px; }
	.df-presence h2 { max-width: none; }
	.df-presence__text { margin-top: -9px !important; }

	/* 07 Delish */
	.df-delish { padding: 28px 29px; }
	.df-delish__photo { width: 100%; }
	.df-justify { text-align: justify; }

	/* 08 Why */
	.df-why { padding: 20px 0 0; }
	.df-why > h2 { padding-inline: 13px; }
	.df-why__photo { height: 232px; }

	/* 09 CTA */
	.df-cta { padding: 57px 33px 40px; }
	.df-cta .wp-block-buttons { flex-direction: column; align-items: center; }

	/* Footer (Figma mobile: one column, 13px) */
	.df-footer { padding: 28px 27px 14px; }
	.df-footer__cols { grid-template-columns: 1fr; gap: 28px; }
	.df-footer__logo, .df-footer__logo img { width: 144px !important; }
	.df-footer__about p { margin-top: 20px !important; max-width: 260px; }
	.df-footer__list { gap: 11px; }
	.df-footer__list + .df-footer__list { gap: 9px; }
	.df-footer__divider.wp-block-separator { margin-top: 32px !important; }
	.df-footer__legal { margin-top: 18px !important; flex-direction: column; align-items: flex-start !important; gap: 9px; }
}

/* ==========================================================================
   INNER PAGES — About, Products, Export & Consolidation, Delish, Contact, 404
   Mobile values from Figma "About us — Mobile 375"; the other pages use the
   same section types, so they share these rules.
   ========================================================================== */

/* ---------- TABLET ------------------------------------------------------- */
@media (max-width: 1024px) {
	.df-hero--about .df-hero__title, .df-hero--products .df-hero__title,
	.df-hero--export .df-hero__title, .df-hero--delish .df-hero__title { max-width: none; }
	.df-hero--delish .df-hero__title { line-height: 1.15 !important; }
	.df-hero--contact .df-hero__title { font-size: 64px !important; line-height: 68px !important; }

	/* Grids: 3 and 4 columns become 2; logos 3 per row */
	.df-g3, .df-g4, .df-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.df-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Split sections (photo/teal panel + list) stack */
	.df-locations,
	.df-grid.df-g2:has(> .df-photo-panel),
	.df-grid.df-g2:has(> .df-talk),
	.df-grid.df-g2:has(> .df-own-label) { grid-template-columns: 1fr; }
	.df-photo-panel.wp-block-cover { min-height: 460px !important; }
	.df-stack > * { flex: none; }
	.df-talk { min-height: 0; }
	.df-track { grid-template-rows: none; grid-auto-rows: minmax(162px, auto); }

	/* Products (Figma tablet: photo pinned to the card's top-right) */
	.df-hero--products .df-hero__title { max-width: 610px; }
	.df-pcats > .df-pcat:nth-child(-n+4), .df-pcat { min-height: 340px; }
	.df-pcat .df-pcat__img { left: auto !important; right: 8px; }

	/* Export (Figma tablet) */
	body:has(.df-hero--export) .df-intro .df-cols { grid-template-columns: 1fr; row-gap: 16px; }
	.df-check { padding-block: 12px; min-height: 0; }
	body:has(.df-hero--export) .df-card--why { min-height: 0; gap: 6px; justify-content: space-between; }
	.df-photo-panel.wp-block-cover { min-height: 400px !important; }
	.df-photo-panel__title--xl { font-size: 48px !important; line-height: 52px !important; }

	/* Delish */
	.df-range-card { min-height: 0; gap: 14px; }
	.df-range-card__img { height: 150px; }
	.df-own-label__steps { grid-auto-rows: auto; }
	.df-own-label__steps .df-num-card { min-height: 0; padding: 16px; gap: 6px; }

	/* Contact */
	.df-form-panel { grid-template-columns: 1fr; gap: 32px; padding: 48px; }
	.df-form-panel__intro { max-width: 520px; }
	.df-office { min-height: 560px; padding: 33px; }

	/* 404 (Figma tablet) */
	.df-404 { min-height: 560px; overflow: hidden; }
	.df-404__text { padding: 70px 0 60px 8px; max-width: 420px; position: relative; z-index: 2; }
	.df-404__title { font-size: 80px !important; line-height: 76px !important; }
	.df-404__text p { font-size: 18px; line-height: 23px; }
	.df-404__text .wp-block-button__link { padding: 18px 30px; font-size: 16px; }
	.df-404__text .wp-block-button:last-child .wp-block-button__link { background: var(--wp--preset--color--teal); }
	.df-404__plate { left: auto; right: -150px; top: 110px; width: 520px; z-index: 1; }
	.df-404__plate img { width: 100%; }
}

/* ---------- MOBILE ------------------------------------------------------- */
@media (max-width: 600px) {
	/* Heroes */
	.df-hero--about.wp-block-cover, .df-hero--products.wp-block-cover, .df-hero--export.wp-block-cover,
	.df-hero--delish.wp-block-cover, .df-hero--contact.wp-block-cover { padding: 33px; }
	.df-hero--contact .df-hero__title { font-size: 48px !important; line-height: 52px !important; letter-spacing: -1.2px !important; }
	.df-hero--contact.wp-block-cover { min-height: 420px; }

	/* Intro + section titles */
	.df-intro { padding: 33px 18px 31px; }
	.df-intro > * + * { margin-top: 29px !important; }
	.df-cols { grid-template-columns: 1fr; row-gap: 16px; }
	.df-section__title { padding: 26px 18px 4px; }

	/* Everything stacks to one column (logos 2 per row) */
	.df-g2, .df-g3, .df-g4, .df-products, .df-fields { grid-template-columns: 1fr; }
	.df-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Cards */
	.df-card { padding: 33px; }
	.df-card--h280, .df-card--h303, .df-card--h304, .df-card--why { min-height: 0; gap: 32px; }
	.df-card--why { padding: 29px; gap: 6px; }
	.df-card--big-title h3 { font-size: 32px; line-height: 42px; }
	.df-num-card { padding: 20px; min-height: 0; gap: 12px; }
	.df-num-card--bold .df-label { line-height: 23px; }
	.df-track { grid-auto-rows: auto; }
	.df-chip, .df-check, .df-line { padding: 16px 20px; min-height: 0; }
	.df-grid-photo { min-height: 232px; }

	/* Teal / dark panels */
	.df-vm { padding: 44px; gap: 26px; min-height: 0; }
	.df-own-label, .df-talk { padding: 44px 33px; min-height: 0; }

	/* Photo panels */
	.df-photo-panel.wp-block-cover { padding: 40px 33px; min-height: 320px !important; }
	.df-photo-panel .wp-block-cover__inner-container > .wp-block-buttons { margin-top: 29px !important; }
	.df-photo-panel__title { font-size: 40px !important; line-height: 52px !important; }
	.df-photo-panel__title--xl { font-size: 40px !important; line-height: 44px !important; }
	.df-photo-panel .wp-block-button, .df-photo-panel .wp-block-button__link { width: 100%; }

	/* Products */
	.df-pcat, .df-pcats > .df-pcat:nth-child(-n+4) { min-height: 0; justify-content: flex-start; }
	.df-pcat .df-card__text { margin-top: 34px !important; }
	.df-pcat--cta .df-card__text { margin-top: 0 !important; }
	.df-pcat--cta .wp-block-buttons { margin-top: 16px !important; }
	.df-pcat--fruits .df-pcat__img, .df-pcat--canned .df-pcat__img { top: 14px !important; height: 100px !important; }
	.df-filters { gap: 8px; }
	.df-filter { padding: 13px 20px; font-size: 14px; }
	.df-tabs { gap: 8px; }
	.df-tab { padding: 13px 20px; font-size: 14px; }

	/* Delish */
	.df-range-card { min-height: 0; }
	.df-range-card__img { height: 170px; }
	.df-card--h280 { gap: 16px; }
	.df-own-label__steps { grid-auto-rows: auto; gap: 10px; }
	.df-own-label__steps .df-num-card { min-height: 0; padding: 14px 13px; gap: 6px; }

	/* CTA on inner pages */
	.df-cta--page { padding: 56px 28px; }
	.df-cta--page .df-cta__lead { font-size: 24px; line-height: 31px; }
	.df-cta--page .wp-block-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; }

	/* Contact */
	.df-form-panel { padding: 33px 22px; gap: 28px; border-radius: var(--df-r-m); }
	.df-form .wp-block-button, .df-form .wp-block-button__link { width: 100%; }
	.df-office { padding: 22px; min-height: 0; gap: 22px; }
	.df-office__photo { height: 180px; }
	.df-office .df-office__actions .wp-block-button, .df-office .df-office__actions .wp-block-button__link { width: 100%; }

	/* 404 (Figma mobile: narrow text column, plate peeking in on the right) */
	.df-404 { min-height: 0; overflow: hidden; }
	.df-404__text { padding: 30px 0 24px; max-width: 240px; position: relative; z-index: 2; }
	.df-404__title { font-size: 48px !important; line-height: 40px !important; }
	.df-404__text p { margin-top: 22px !important; max-width: 170px; font-size: 14px; line-height: 21px; }
	.df-404__text .wp-block-buttons { margin-top: 24px !important; flex-wrap: nowrap; width: calc(100vw - 40px); gap: 8px; }
	.df-404__text .wp-block-button__link { padding: 16px 28px; white-space: nowrap; }
	.df-404__text .wp-block-button:last-child .wp-block-button__link { background: var(--wp--preset--color--teal); }
	.df-404__plate { top: 160px; bottom: auto; right: -120px; left: auto; width: 300px; z-index: 1; }
}