/**
 * Pacific Plans component styles.
 *
 * Lifted verbatim from the per-page CSS on the built category and plan detail
 * pages, so nothing here changes how those pages look. It lives in the plugin
 * because per-page CSS meta is lost whenever a page is rebuilt and re-imported,
 * which has already silently broken these components once.
 *
 * Rules are unchanged from the source. The two blocks that appeared on both the
 * category pages and the plan page (the toast and the centred CTA) appear once.
 */

/* ==== CATEGORY HERO ==== */
.ph-chero{background:var(--color-primary);position:relative;overflow:hidden}
.ph-chero-bg{position:absolute;inset:0}
.ph-chero-bg>img{width:100%;height:100%;object-fit:cover}
.ph-chero .ns-container{position:relative;z-index:1;padding-top:calc(var(--header-h) + 2rem);padding-bottom:3rem}
.ph-crumb{color:rgba(255,255,255,.6);font-size:var(--text-sm);margin-bottom:var(--space-sm)}
.ph-crumb a{text-decoration:underline;text-underline-offset:3px}
.ph-chero h1{color:var(--color-text-inverse);max-width:20ch;margin-bottom:var(--space-sm)}
.ph-chero .lead{color:rgba(255,255,255,.85);max-width:62ch}

/* Generated category pages emit .ph-ghero, the original template used
   .ph-chero. Both are defined so a page cannot silently lose its hero. */
.ph-ghero{background:var(--color-primary);position:relative;overflow:hidden;min-height:320px}
.ph-ghero-bg{position:absolute;inset:0}
.ph-ghero-bg>img{width:100%;height:100%;object-fit:cover}
.ph-ghero .ns-container{position:relative;z-index:1;padding-top:calc(var(--header-h) + 2rem);padding-bottom:3rem}
.ph-ghero h1{color:var(--color-text-inverse);max-width:22ch;margin-bottom:var(--space-sm)}
.ph-ghero .lead{color:rgba(255,255,255,.88);max-width:62ch}
.ph-ghero-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-md)}
.ph-ghero-tags span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-sm);padding:.3rem .8rem;font-size:var(--text-xs);
  font-family:var(--font-serif);font-weight:var(--font-semibold);color:rgba(255,255,255,.95)}
.ph-ghero .ph-crumb{color:rgba(255,255,255,.7);font-size:var(--text-sm);margin-bottom:var(--space-sm)}
.ph-ghero .ph-crumb a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
.ph-ghero .ph-crumb a:hover{color:#fff}

/* ==== SIBLING CATEGORY RAIL ==== */
.ph-rail{background:var(--color-surface);border-bottom:1px solid var(--color-border);overflow-x:auto}
.ph-rail .ns-container{display:flex;gap:.5rem;padding-top:.85rem;padding-bottom:.85rem;white-space:nowrap}
.ph-rail a{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.4rem .9rem;font-family:var(--font-serif);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--color-heading);background:var(--color-background);transition:all var(--transition-fast)}
.ph-rail a:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.ph-rail a.current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* ==== FILTER BAR ==== */
.ph-filterbar{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.2rem 1.4rem;margin-bottom:var(--space-lg)}
.ph-fgroups{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:flex-end}
.ph-fgroup{display:flex;flex-direction:column;gap:.4rem}
.ph-fgroup>span{font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.ph-fopts{display:flex;gap:.35rem;flex-wrap:wrap}
.ph-fopt{border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);padding:.42rem .85rem;font-family:var(--font-serif);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--color-heading);cursor:pointer;transition:all var(--transition-fast)}
.ph-fopt:hover{border-color:var(--color-secondary)}
.ph-fopt.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.ph-fmeta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--color-border-light)}
.ph-fcount{font-size:var(--text-sm);color:var(--color-text-muted)}
.ph-fcount b{font-family:var(--font-serif);color:var(--color-heading)}
.ph-freset{background:none;border:none;font-family:var(--font-serif);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--color-link);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ==== PLAN GRID ==== */
.ph-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
@media (max-width:980px){.ph-plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ph-plans{grid-template-columns:1fr}}
.ph-plan{display:flex;flex-direction:column;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base);position:relative}
.ph-plan.is-hidden{display:none}
.ph-plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-secondary)}
.ph-plan-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-surface)}
.ph-plan-media>img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.ph-plan:hover .ph-plan-media>img{transform:scale(1.04)}
.ph-plan-badge{position:absolute;top:.7rem;left:.7rem;background:var(--color-accent);color:#fff;border-radius:var(--radius-sm);padding:.22rem .6rem;font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-xs)}
.ph-plan-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex-grow:1}
.ph-plan-body h3{font-size:var(--text-base);margin-bottom:.6rem}
.ph-plan-body h3 a{color:var(--color-heading)}
.ph-plan-body h3 a:hover{color:var(--color-secondary)}
.ph-specs{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.ph-spec{display:flex;align-items:center;gap:.35rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.ph-spec svg{width:16px;height:16px;fill:var(--color-secondary);flex-shrink:0}
.ph-spec b{font-family:var(--font-serif);font-weight:var(--font-bold);color:var(--color-heading)}
.ph-plan-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding-top:.8rem;border-top:1px solid var(--color-border-light)}
.ph-plan-view{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-secondary)}
.ph-plan-view svg{width:15px;height:15px;fill:currentColor;transition:transform var(--transition-base)}
.ph-plan:hover .ph-plan-view svg{transform:translateX(4px)}
.ph-plan-quote{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:underline;text-underline-offset:2px}
.ph-noresults{background:var(--color-surface);border-radius:var(--radius-lg);padding:2rem;text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}

/* Generated cards use .ph-plan-link where the original template used
   .ph-plan-view. Both are covered so neither arrow can lose its size. */
.ph-plan-link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-secondary)}
.ph-plan-link svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;transition:transform var(--transition-base)}
.ph-plan:hover .ph-plan-link svg{transform:translateX(4px)}

/* Square footage badge. Generated pages emit .ph-plan-sq, the original
   template used .ph-plan-badge. */
.ph-plan-sq{position:absolute;left:.75rem;top:.75rem;background:rgba(15,44,73,.9);color:#fff;
  border-radius:var(--radius-sm);padding:.25rem .65rem;font-family:var(--font-serif);
  font-weight:var(--font-bold);font-size:var(--text-xs);z-index:2}

/* Safety net: no svg inside main should ever exceed its line box. */
main svg{max-width:100%}

/* ==== SAVE CONTROLS AND TOAST ==== */
.ph-cardsave{position:absolute;right:.7rem;top:.7rem;z-index:3;width:38px;height:38px;border-radius:var(--radius-md);
  border:none;cursor:pointer;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);backdrop-filter:blur(4px)}
.ph-cardsave:hover{background:#fff;transform:scale(1.08)}
.ph-cardsave svg{width:19px;height:19px;fill:none;stroke:var(--color-primary);stroke-width:2}
.ph-cardsave.is-saved{background:var(--color-accent)}
.ph-cardsave.is-saved svg{fill:#fff;stroke:#fff}

.ph-save{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius-md);color:#fff;cursor:pointer;
  padding:.7rem 1.2rem;font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-sm);
  transition:all var(--transition-fast);backdrop-filter:blur(4px)}
.ph-save:hover{background:rgba(255,255,255,.24);border-color:#fff}
.ph-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ph-save.is-saved{background:var(--color-accent);border-color:var(--color-accent)}
.ph-save.is-saved svg{fill:currentColor;stroke:currentColor}
.ph-save-label{display:inline}
/* Pill badge: the radius is half the 20px height on purpose, not a design
   radius. The site scale is 3px on controls and 4px on media. */
.ph-save-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border-radius:10px;background:rgba(0,0,0,.25);font-size:var(--text-xs);padding:0 .35rem}
.ph-save-count[hidden]{display:none}

/* The card control carries both classes, so it must not inherit the detail
   page button's padded pill treatment or its white icon. On the built pages
   these two rule sets lived on separate templates and never met; in one
   stylesheet they collide at equal specificity, and .ph-save wins on order.
   These doubled-class selectors settle it in the card's favour. */
.ph-cardsave.ph-save{padding:0;background:rgba(255,255,255,.9);border:none}
.ph-cardsave.ph-save:hover{background:#fff}
.ph-cardsave.ph-save svg{width:19px;height:19px;fill:none;stroke:var(--color-primary);stroke-width:2}
.ph-cardsave.ph-save.is-saved{background:var(--color-accent)}
.ph-cardsave.ph-save.is-saved svg{fill:#fff;stroke:#fff}

.ph-toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(140%);z-index:9998;
  background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:.85rem 1.3rem;
  font-size:var(--text-sm);box-shadow:var(--shadow-lg);transition:transform var(--transition-base);
  display:flex;align-items:center;gap:.8rem;max-width:92vw}
.ph-toast.show{transform:translateX(-50%) translateY(0)}
.ph-toast a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ==== CATEGORY PAGE EDITORIAL ==== */
.ph-cross{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-md)}
.ph-cross a{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.7rem 1.15rem;font-family:var(--font-serif);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--color-heading);transition:all var(--transition-fast)}
.ph-cross a:hover{background:var(--color-primary);color:#fff}
.ph-prose h3{font-size:var(--text-base);margin:var(--space-md) 0 .3rem}
.ph-prose p{color:var(--color-text-muted);margin-bottom:.8rem}
.ph-faq .ns-accordion-item{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-sm);overflow:hidden}
.ph-faq .ns-accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.5rem;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-base);color:var(--color-heading)}
.ph-faq .ns-accordion-header:hover{background:var(--color-surface)}
.ph-faq .ns-arrow{width:20px;height:20px;fill:var(--color-secondary);flex-shrink:0}
.ph-faq .ns-accordion-content{padding:0 1.5rem 1.3rem;color:var(--color-text-muted)}
.ph-cta-center{text-align:center;max-width:780px;margin:0 auto}

/* Editorial split: the opening statement becomes an image split, the remaining
   headings sit below in two columns. */
.ph-esplitsec{padding:0}
.ph-esplit{display:grid;grid-template-columns:1fr 1fr;min-height:min(70vh,540px);align-items:stretch}
@media (max-width:900px){.ph-esplit{grid-template-columns:1fr}}
.ph-esplit-media{position:relative;min-height:300px;background:#111820}
.ph-esplit-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-esplit-body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.2rem,5vw,4.2rem) clamp(1.4rem,4vw,3.6rem)}
.ph-esplit-body h2{margin-bottom:.9rem}
.ph-esplit-body p{color:var(--color-text-muted);max-width:46ch;margin:0}
.ph-edetail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);max-width:1020px}
@media (max-width:820px){.ph-edetail{grid-template-columns:1fr}}
.ph-edetail>div{border-top:2px solid var(--color-border-dark);padding-top:1rem}
.ph-edetail h2{font-size:var(--text-base);margin-bottom:.4rem}
.ph-edetail p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}

/* ==== PLAN DETAIL HERO ==== */
.ph-phero{position:relative;background:var(--color-primary);overflow:hidden}
.ph-phero-img{position:relative;width:100%;aspect-ratio:2050/650;min-height:340px}
.ph-phero-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-phero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,44,73,.55) 0%,rgba(15,44,73,.05) 38%,rgba(15,44,73,.82) 100%)}
.ph-phero-top{position:absolute;top:0;left:0;right:0;padding:calc(var(--header-h) + .8rem) 0 1.4rem}
.ph-phero-bottom{position:absolute;bottom:0;left:0;right:0;padding:1.8rem 0 2rem}
.ph-pcrumb{color:rgba(255,255,255,.8);font-size:var(--text-sm)}
.ph-pcrumb a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.ph-pcrumb a:hover{color:#fff}
.ph-phero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ph-phero h1{color:var(--color-text-inverse);margin-bottom:.4rem;line-height:1.05}
.ph-phero-style{display:inline-block;background:var(--color-accent);color:#fff;border-radius:var(--radius-sm);
  padding:.25rem .8rem;font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-xs);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
.ph-phero-specs{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.6rem}
.ph-phero-spec{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.92);font-size:var(--text-base)}
.ph-phero-spec svg{width:19px;height:19px;fill:var(--color-accent);flex-shrink:0}
.ph-phero-spec b{font-family:var(--font-serif);font-weight:var(--font-bold)}
@media (max-width:900px){
  .ph-phero-img{aspect-ratio:auto;height:420px}
  .ph-phero-bottom{padding-bottom:1.4rem}
  .ph-phero-specs{gap:1rem}
  .ph-phero-spec{font-size:var(--text-sm)}
}

/* ==== PLAN DETAIL BODY ==== */
.ph-actions{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.ph-actions .ns-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.ph-actions-note{font-size:var(--text-sm);color:var(--color-text-muted)}
.ph-actions-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.ph-pbody{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-xl)}
@media (max-width:980px){.ph-pbody{grid-template-columns:1fr;gap:var(--space-lg)}}
.ph-pbody h2{font-size:var(--text-xl);margin-bottom:.7rem}
.ph-pbody h2:not(:first-child){margin-top:var(--space-lg)}
.ph-pbody p{color:var(--color-text-muted);margin-bottom:.9rem;max-width:70ch}

/* Standard-package strip. Styled as furniture rather than prose because this
   block is identical on every plan page and must not dominate a plan with a
   short description. */
.ph-standard{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.4rem 1.6rem;margin-top:var(--space-lg)}
.ph-standard h3{font-size:var(--text-sm);font-family:var(--font-serif);font-weight:var(--font-bold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.9rem}
.ph-standard ul{display:grid;gap:.7rem}
.ph-standard li{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;
  padding-left:1.1rem;position:relative}
.ph-standard li::before{content:"";position:absolute;left:0;top:.55rem;width:5px;height:5px;
  border-radius:50%;background:var(--color-accent)}
.ph-standard strong{font-family:var(--font-serif);color:var(--color-heading)}

.ph-spectable{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:1.5rem}
.ph-spectable h3{font-size:var(--text-base);padding:1.1rem 1.3rem;margin:0;background:var(--color-primary);color:#fff}
.ph-specrow{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1.3rem;border-bottom:1px solid var(--color-border-light);font-size:var(--text-sm)}
.ph-specrow:last-of-type{border-bottom:none}
.ph-specrow dt{color:var(--color-text-muted)}
.ph-specrow dd{font-family:var(--font-serif);font-weight:var(--font-bold);color:var(--color-heading);margin:0;text-align:right}
.ph-spectable-foot{padding:1.1rem 1.3rem;border-top:1px solid var(--color-border);background:var(--color-surface)}
.ph-spectable-foot .ns-btn{width:100%;justify-content:center}
.ph-spectable-foot p{font-size:var(--text-xs);color:var(--color-text-muted);margin:.7rem 0 0;text-align:center}
@media (max-width:980px){.ph-spectable{position:static}}

.ph-floors{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
@media (max-width:760px){.ph-floors{grid-template-columns:1fr}}
.ph-floor{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.ph-floor-img{aspect-ratio:4/3;background:var(--color-surface);position:relative}
.ph-floor-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1rem}
.ph-floor-cap{padding:.9rem 1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--color-border-light)}
.ph-floor-cap strong{font-family:var(--font-serif);font-size:var(--text-sm);color:var(--color-heading)}
.ph-floor-cap span{font-size:var(--text-sm);color:var(--color-text-muted)}

.ph-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
@media (max-width:760px){.ph-gal{grid-template-columns:repeat(2,1fr)}}
.ph-gal img{width:100%;height:240px;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:var(--radius-md);display:block}
@supports (aspect-ratio:1){.ph-gal img{height:auto}}

/* Grid tracks size to min-content by default, so a wide image forces its
   column wider than the page instead of scaling down. Every grid child that
   holds an image needs this or the whole document scrolls sideways. */
.ph-gal img,
.ph-plan,
.ph-simcard,
.ph-floor{min-width:0}

.ph-sim{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
@media (max-width:980px){.ph-sim{grid-template-columns:repeat(2,1fr)}}
.ph-simcard{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}
.ph-simcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-secondary)}
.ph-simcard img{width:100%;height:180px;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block}
@supports (aspect-ratio:1){.ph-simcard img{height:auto}}
.ph-simcard-body{padding:.9rem 1.1rem 1.1rem}
.ph-simcard h3{font-size:var(--text-base);margin-bottom:.2rem}
.ph-simcard p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}

/* Plan PDF download sits under the floor plans. */
.ph-plan-dl{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--space-md);
  font-family:var(--font-serif);font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-secondary)}
.ph-plan-dl svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}