/* ============================================================================
   press.css — Trionic "Press & media kit" page-specific layout
   Load AFTER trionic-content.css (shared base). All rules scoped under #content.
   From the Claude Design handoff. The prototype's <image-slot> drag-drop widget
   is implemented here as static .img-slot placeholders — drop real <img> tags
   (or LiteCart product images) in when the assets are ready.
   ============================================================================ */

/* --- Brand wordmark (used in logo tiles) --- */
#content .tm-wordmark {
  font-family:var(--display); font-weight:900; font-style:italic;
  letter-spacing:-0.01em; color:var(--pms-291);
  -webkit-text-stroke:2px #141414; paint-order:stroke fill;
  text-transform:uppercase; line-height:1; display:inline-block;
}

/* (Base .img-slot placeholder lives in the shared trionic-content.css; the
   per-context sizing for .asset / .exec slots is below.) */

/* --- Hero --- */
#content .press-hero { background:var(--bg-blue); }
#content .press-hero .ph-grid { display:grid; grid-template-columns:1.3fr 0.7fr; gap:56px; align-items:end; }
#content .press-hero h1 { font-size:clamp(56px,10vw,150px); line-height:0.9; margin:0 0 24px; }
#content .press-hero h1 em { color:var(--pms-1915); }
#content .press-hero .lead {
  font-size:clamp(18px,1.7vw,22px); line-height:1.45;
  max-width:42ch; font-weight:500; color:#141414; margin:0 0 32px;
}
#content .press-kit-meta { border:3px solid #141414; border-radius:4px; background:#fff; padding:24px; }
#content .press-kit-meta h4 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 16px; color:#141414;
}
#content .press-kit-meta dl { margin:0; display:grid; gap:12px; }
#content .press-kit-meta .kv {
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line-strong);
}
#content .press-kit-meta .kv:last-child { border-bottom:0; padding-bottom:0; }
#content .press-kit-meta dt {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2);
}
#content .press-kit-meta dd {
  margin:0; font-weight:700; font-size:14px; color:#141414;
  font-family:var(--display); font-style:italic; text-align:right;
}

/* --- Fact sheet --- */
#content .fact-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#141414;
  border:3px solid #141414; border-radius:4px; overflow:hidden;
}
#content .fact { background:#fff; padding:28px; display:flex; flex-direction:column; gap:8px; min-height:132px; }
#content .fact:nth-child(3n+2) { background:var(--web-bg-blue); }
#content .fact .k {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2);
}
#content .fact .v {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(20px,2vw,27px); line-height:1.05; letter-spacing:-0.015em; color:#141414;
}
#content .fact .v small { display:block; font-size:13px; color:var(--ink-2); margin-top:4px; font-weight:600; }

/* --- Logo tiles --- */
#content .logo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#content .logo-tile { border:3px solid #141414; border-radius:4px; overflow:hidden; display:flex; flex-direction:column; }
#content .logo-stage { aspect-ratio:16/9; display:grid; place-items:center; position:relative; }
#content .logo-stage.on-light { background:#fff; }
#content .logo-stage.on-blue { background:var(--pms-291); }
#content .logo-stage.on-dark { background:#141414; }
#content .logo-foot {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 18px; border-top:3px solid #141414; background:#fff;
}
#content .logo-foot .name { font-family:var(--display); font-weight:800; font-style:italic; font-size:14px; color:#141414; }
#content .logo-foot .fmt { font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:0.04em; }
#content .logo-dl {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:700; font-style:italic; font-size:12px; letter-spacing:0.04em;
  padding:8px 14px; border:2px solid #141414; border-radius:4px;
  background:#fff; color:#141414; cursor:pointer; white-space:nowrap;
}
#content .logo-dl:hover { background:var(--cta-green); border-color:var(--cta-green); color:#fff; }
#content .logo-stage .tm-wordmark { font-size:clamp(28px,4vw,46px); }
#content .logo-stage.on-dark .tm-wordmark { color:#fff; -webkit-text-stroke:2px #fff; }
#content .logo-stage.on-blue .tm-wordmark { color:#fff; -webkit-text-stroke:2px #141414; }
#content .logo-stage.mono .tm-wordmark { color:#141414; -webkit-text-stroke:2px #141414; }
#content .logo-stage.mono-white .tm-wordmark { color:#fff; -webkit-text-stroke:2px #fff; }

/* --- Asset / product gallery --- */
#content .asset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#content .asset { border:3px solid #141414; border-radius:4px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
#content .asset .img-slot { display:flex; width:100%; aspect-ratio:4/3; border-bottom:3px solid #141414; }
#content .asset.lifestyle .img-slot { aspect-ratio:3/2; }
#content .asset-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; }
#content .asset-foot .name { font-family:var(--display); font-weight:800; font-style:italic; font-size:15px; color:#141414; }
#content .asset-foot .name small {
  display:block; font-family:var(--mono); font-weight:400; font-style:normal;
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2); margin-top:3px;
}

/* --- Executives --- */
#content .exec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
#content .exec {
  display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:start;
  border:3px solid #141414; border-radius:4px; background:#fff; padding:24px;
}
#content .exec .img-slot { display:flex; width:100%; aspect-ratio:1/1; border:2px solid #141414; border-radius:4px; }
#content .exec h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:26px; margin:0 0 2px; color:#141414; letter-spacing:-0.015em;
}
#content .exec .role {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--pms-298); margin-bottom:12px;
}
#content .exec p { margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); font-weight:500; }
#content .exec .exec-dl {
  margin-top:14px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:700; font-style:italic; font-size:12px;
  padding:7px 13px; border:2px solid #141414; border-radius:4px; color:#141414; cursor:pointer;
}
#content .exec .exec-dl:hover { background:var(--cta-green); border-color:var(--cta-green); color:#fff; }

/* --- Press releases --- */
#content .pr-list { display:flex; flex-direction:column; gap:14px; }
#content .pr-item {
  display:grid; grid-template-columns:130px 1fr auto; gap:24px; align-items:center;
  border:3px solid #141414; border-radius:4px; background:#fff; padding:22px 24px; transition:all .15s;
}
#content .pr-item:hover { background:var(--web-bg-blue); transform:translateX(4px); }
#content .pr-date {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--pms-298);
}
#content .pr-item h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(18px,1.8vw,22px); margin:0; color:#141414; letter-spacing:-0.01em; line-height:1.15;
}
#content .pr-item h3 span {
  display:block; font-weight:600; font-style:normal; font-size:13.5px;
  color:var(--ink-2); margin-top:4px; font-family:var(--sans);
}
#content .pr-tag {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border:2px solid #141414; border-radius:999px;
  white-space:nowrap; background:#fff; color:#141414;
}
#content .pr-tag.launch { background:var(--pms-012); }
#content .pr-tag.award { background:var(--pms-1915); color:#fff; }
#content .pr-tag.expansion { background:var(--pms-291); }

/* --- Press contact band --- */
#content .contact-band { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
#content .contact-card { border:3px solid var(--pms-291); border-radius:4px; padding:28px; background:rgba(151,202,235,0.06); }
#content .contact-card h4 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--pms-291); margin:0 0 16px;
}
#content .contact-card .cc-name {
  font-family:var(--display); font-weight:800; font-style:italic; font-size:24px; color:#fff; margin-bottom:4px;
}
#content .contact-card .cc-role { font-size:13px; color:#b0b3b8; font-weight:500; margin-bottom:16px; }
#content .contact-card a { color:var(--pms-291); font-weight:600; }
#content .contact-card a:hover { color:#fff; }
#content .contact-card .cc-line { display:flex; gap:10px; padding:8px 0; font-size:15px; color:#e8e5da; align-items:center; }

/* --- Responsive --- */
@media (max-width:1000px) {
  #content .press-hero .ph-grid { grid-template-columns:1fr; gap:32px; }
  #content .fact-grid { grid-template-columns:repeat(2,1fr); }
  #content .logo-grid { grid-template-columns:1fr 1fr; }
  #content .asset-grid { grid-template-columns:1fr 1fr; }
  #content .exec-grid { grid-template-columns:1fr; }
  #content .contact-band { grid-template-columns:1fr; gap:28px; }
  #content .pr-item { grid-template-columns:90px 1fr; }
  #content .pr-item .pr-tag { grid-column:2; justify-self:start; }
}
@media (max-width:640px) {
  #content .fact-grid, #content .logo-grid, #content .asset-grid { grid-template-columns:1fr; }
  #content .exec { grid-template-columns:1fr; }
  #content .exec .img-slot { max-width:180px; }
}