/* =========================================================================
   TERAKAWA Photo Office — multilingual (EN/ES/KO/AR/FR) spacing & behaviour
   parity pass. Brings the .en-* template in line with the Japanese site's
   rhythm (section padding, single divider lines, sticky portrait, page
   number position) without changing the multilingual layout itself.
   Additive only — does not touch common.css / sub.css.
   Rev 2026-07-09b: removed page-hero border line (double-line fix), more
   bottom breathing room, hard-pinned page-hero-num + sticky portrait.
   ========================================================================= */

/* --- Vertical rhythm: every custom section (.en-wrap) gets real breathing
   room above and below, matching the JP rhythm (.filter-section /
   .works-gallery / .service-detail). Bottom gets extra room so content
   never sits flush against the dark footer-cta band that follows it. */
.en-wrap{padding-top:90px;padding-bottom:150px}
.en-wrap.wide{padding-top:90px;padding-bottom:150px}

@media (max-width:900px){
  .en-wrap,.en-wrap.wide{padding-top:56px;padding-bottom:90px}
}

/* First category label right under the hero doesn't need extra top margin
   on top of the section padding above — one deliberate gap, not two. */
.en-cat:first-of-type{margin-top:0}

/* --- Kill the hero's own bottom rule on these pages: with the category
   divider (.en-cat::after) now sitting right below, keeping both reads as
   a double line. Only one line — the category's own — remains. */
.page-hero{border-bottom:none!important}

/* --- Page number ("01" / "02" / "03"...) pinned to the same spot as the
   Japanese pages, on every page, at every breakpoint. Hard-set so nothing
   in an inline <style> block or load order can knock it off position. */
.page-hero{position:relative!important}
.page-hero-num{
  position:absolute!important;
  top:80px!important;
  right:40px!important;
  left:auto!important;
  bottom:auto!important;
  margin:0!important;
}
@media (max-width:900px){
  .page-hero-num{top:116px!important;right:24px!important}
}
@media (max-width:699px){
  .page-hero-num{top:116px!important;right:20px!important}
}
@media (max-width:480px){
  .page-hero-num{top:116px!important;right:18px!important}
}

/* --- RTL (Arabic): mirror the number to the left edge instead of right,
   matching the page's own dir="rtl" mirroring logic. Higher specificity
   than the base rule above, so this wins on Arabic pages only. */
html[dir="rtl"] .page-hero-num{
  right:auto!important;
  left:40px!important;
}
@media (max-width:900px){
  html[dir="rtl"] .page-hero-num{left:24px!important;right:auto!important}
}
@media (max-width:699px){
  html[dir="rtl"] .page-hero-num{left:20px!important;right:auto!important}
}
@media (max-width:480px){
  html[dir="rtl"] .page-hero-num{left:18px!important;right:auto!important}
}

/* --- About page: portrait follows the reader down the page and starts at
   the same top edge as the text column, exactly like the Japanese About
   page (.about-main-visual{position:sticky;top:140px;align-self:start}).
   Also matches JP's proportional column split (4fr 8fr) instead of a
   fixed 360px column, which is what made the portrait sit further
   inward than the JP page on wide viewports. */
.en-about{
  grid-template-columns:4fr 8fr!important;
  align-items:start!important;
}
.en-about .portrait-figure{
  position:sticky!important;
  top:140px!important;
  align-self:start!important;
  margin-top:0!important;
}
@media (max-width:900px){
  .en-about{grid-template-columns:1fr!important;gap:40px!important}
  .en-about .portrait-figure{
    position:static!important;
    max-width:280px!important;
    width:100%!important;
    margin:0 auto 8px!important;
  }
}

/* FAQ accordion (Services / Model pages) reuses the site's existing
   .faq-section / .faq-item / .faq-q / .faq-a classes and common.js toggle
   logic already shared with the Japanese site — no new CSS/JS needed here. */