/* ZERUI ENERGY Website v1.1 · photo-first commodity language, Website Manifest v1.0 */
/* Scope: public presentation only. No transaction, auth or provider semantics. */

/* Documentary hero: the original SVG painting is replaced by a real photograph. */
.hero-section { background:linear-gradient(126deg,#081c2a 0%,#102f41 80%); }
.hero-visual { background:#122c39; min-height:640px; }
.hero-visual .hero-art-img { inset:0; }
.hero-visual img.hero-photograph { width:100%;height:100%;object-fit:cover;object-position:43% 50%;filter:saturate(.88) contrast(1.05); }
.hero-art-img::after { background:linear-gradient(90deg,#0c293933 0%,transparent 30%),linear-gradient(0deg,#071b25b0 0%,transparent 38%); }
.hero-art-label { bottom:42px;right:14px;max-width:80%;line-height:1.7;backdrop-filter:blur(8px);font-size:9px; }
.coord { color:#e4eef0b6;text-shadow:0 1px 8px #08233180; }
.figure-tag { background:#081d2acc;backdrop-filter:blur(4px);padding:8px 12px; }
.feature-image-frame img { filter:saturate(.85) contrast(1.04); }

/* Grouped commodity content: each category keeps its actual business purpose. */
.grouped-products { display:flex;flex-direction:column;gap:54px;margin-top:26px; }
.product-group { scroll-margin-top:110px; }
.product-group-head { display:grid;grid-template-columns:minmax(170px, .31fr) 1fr;gap:30px;align-items:start;border-top:1px solid #d7e1e4;padding-top:20px;margin-bottom:20px; }
.product-group-head > span { color:#527989;font:700 10px/1.7 ui-monospace,Consolas,monospace;letter-spacing:.14em; }
.product-group-head h3 { margin:0 0 9px;font-size:clamp(23px,2.3vw,32px);font-weight:650;letter-spacing:-.045em; }
.product-group-head p { margin:0;color:#657e89;font-size:13px;line-height:1.7;max-width:690px; }
.photo-product-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.photo-product-grid .product-card { min-height:434px;border-radius:5px;background:#fff;box-shadow:0 6px 20px #0d334508; }
.photo-product-grid .product-card-top { padding:0;position:absolute;z-index:2;top:15px;left:15px;right:15px; }
.photo-product-grid .product-no { font:750 10px/1.3 ui-monospace,Consolas,monospace;color:#fff;background:#092838bc;backdrop-filter:blur(6px);border:1px solid #ffffff30;padding:9px 11px;letter-spacing:.11em;border-radius:3px; }
.photo-product-grid .product-arrow { color:#fff;background:#112e3f8f;border:1px solid #ffffff60;backdrop-filter:blur(8px); }
.photo-product-grid .product-art { display:block;position:relative;width:100%;height:228px;min-height:228px;margin:0;background:#123342;overflow:hidden; }
.photo-product-grid .product-art::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,#061a2860 0%,transparent 32%,#0b273315 100%);pointer-events:none; }
.photo-product-grid .product-art img { width:100%;height:100%;object-fit:cover;object-position:center 49%;filter:saturate(.9) contrast(1.04);transition:transform .45s,filter .45s; }
.photo-product-grid .product-card:hover .product-art img {transform:scale(1.055);filter:saturate(1) contrast(1.07); }
.photo-product-grid .product-content { background:#fff;padding:22px 25px 25px; }
.photo-product-grid .product-content h3 { font-size:25px;margin:8px 0 9px; }
.photo-product-grid .product-content p {font-size:12px;line-height:1.8; }
.art-crude-oil { background:#eaf0f2; }
.art-refined-products { background:#e9f0f2; }
.art-petroleum-coke { background:#eff1f0; }

/* Product photo header and its independent photo-evidence section. */
.detail-hero {background:#0b2b3e;}
.detail-hero.art-crude-oil {background:#102d3c;}
.detail-hero.art-refined-products {background:#102d40;}
.detail-hero.art-petroleum-coke {background:#222c33;}
.detail-hero .detail-hero-grid {grid-template-columns: 1fr .89fr;gap:20px;min-height:460px;}
.detail-hero .detail-hero-content {padding:60px 18px 65px 0;}
.detail-hero .detail-illustration {height:440px;min-height:440px;overflow:hidden;align-self:stretch;}
.detail-hero .detail-illustration img {width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(1.06);box-shadow:none;}
.detail-hero .detail-illustration::after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061d28a0,transparent 38%);pointer-events:none;}
.detail-photo-notice {position:absolute;z-index:1;bottom:18px;left:22px;right:15px;color:#eaf4f4;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.photo-gallery {padding-top:24px;}
.photo-gallery-head {display:flex;align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:22px;}
.photo-gallery-head h2 {font-size:clamp(26px,3vw,38px);margin:7px 0 3px;}
.photo-gallery-head p {font-size:13px;line-height:1.75;color:#607987;max-width:750px;margin:0;}
.photo-story-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.story-photo {margin:0;position:relative;background:#0e2c3a;overflow:hidden;aspect-ratio:1.75;}
.story-photo img {width:100%;height:100%;object-fit:cover;transition:transform .35s;filter:saturate(.84) contrast(1.08);}
.story-photo:hover img {transform:scale(1.03);}
.story-photo::after {content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,#081a26b8,transparent);pointer-events:none;}
.story-photo figcaption {position:absolute;z-index:1;bottom:15px;left:18px;right:18px;font-size:9px;letter-spacing:.09em;color:#f1f7f6;text-shadow:0 1px 2px #071d28;}
.photo-credits-link {display:inline-flex;gap:10px;align-items:center;margin-top:20px;font-size:12px;color:#346e82;border-bottom:1px solid #a7c3c9;padding-bottom:5px;}

/* Specific refined fuel sections, without pretending any grade is available. */
.fuel-family-section {padding-block:34px 62px;}
.fuel-family-head h2 {font-size:32px;margin:15px 0 7px;}
.fuel-family-head p {color:#68808a;font-size:13px;margin-bottom:21px;}
.fuel-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#d3e0e2;border:1px solid #d3e0e2;}
.fuel-item {padding:27px 22px 25px;background:#f7faf9;min-height:202px;}
.fuel-item b {display:block;font-size:17px;line-height:1.4;margin-bottom:18px;}
.fuel-item p {font-size:12px;color:#516f79;line-height:1.75;margin:0 0 16px;}
.fuel-item small {color:#6f8992;font-size:11px;line-height:1.7;}

/* Image licenses: source, copyright notes, no implication of affiliation. */
.image-credit-body>p {font-size:14px;line-height:1.8;color:#527281;max-width:940px;}
.credit-grid {margin-top:22px;border-top:1px solid #d5e2e4;}
.credit-row {display:grid;grid-template-columns:1.5fr 1fr auto;gap:20px;padding:18px 4px;border-bottom:1px solid #e0e8e9;align-items:start;}
.credit-row b {display:block;font-size:14px;overflow-wrap:anywhere;}
.credit-row small {display:block;margin-top:6px;color:#79909c;font-size:11px;line-height:1.7;}
.credit-row p {font-size:12px;color:#516c78;line-height:1.6;margin:0;overflow-wrap:anywhere;}
.credit-row a {font-size:12px;color:#18657b;white-space:nowrap;}
.credit-links {display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}

@media(max-width:1100px) {
  .photo-product-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .fuel-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .detail-hero .detail-hero-grid {grid-template-columns:1fr 0.9fr;}
}
@media(max-width:720px) {
  .hero-visual {min-height:320px;}
  .hero-visual .hero-art-img {inset:0;}
  .hero-art-label {bottom:16px;right:12px;font-size:8px;padding:8px 10px;}
  .product-group-head {display:block;}
  .product-group-head h3 {margin-top:10px;}
  .grouped-products {gap:34px;}
  .photo-product-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .photo-product-grid .product-art {height:174px;min-height:174px;}
  .photo-product-grid .product-card {min-height:418px;}
  .photo-product-grid .product-content {padding:18px 17px 21px;}
  .photo-product-grid .product-content h3 {font-size:23px;}
  .detail-hero .detail-hero-grid {display:flex;flex-direction:column;gap:0;}
  .detail-hero .detail-hero-content {padding:45px 0 18px;}
  .detail-hero .detail-illustration {width:calc(100% + 42px);margin:0 -21px;height:245px;min-height:245px;}
  .photo-story-grid {gap:12px;}
  .story-photo {aspect-ratio:1.15;}
  .fuel-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .credit-row {grid-template-columns:1fr auto;gap:7px;}
  .credit-row p {grid-column:1 / 2;}
  .credit-row a {grid-column:2;grid-row:1 / 3;align-self:center;}
}
@media(max-width:470px) {
  .hero-visual {min-height:270px;margin:0 -17px;}
  .photo-product-grid {grid-template-columns:1fr;gap:13px;}
  .photo-product-grid .product-card {min-height:397px;}
  .photo-product-grid .product-art {height:210px;min-height:210px;}
  .photo-product-grid .product-content {padding:16px 20px 20px;}
  .photo-product-grid .product-content h3 {font-size:24px;}
  .detail-hero .detail-illustration {width:calc(100% + 34px);margin:0 -17px;height:223px;min-height:223px;}
  .photo-story-grid {grid-template-columns:1fr;gap:14px;}
  .story-photo {aspect-ratio:1.65;}
  .fuel-grid {grid-template-columns:1fr;}
  .fuel-item {min-height:0;}
  .credit-row {display:block;}
  .credit-row a {display:inline-block;margin-top:8px;}
}