/*
Theme Name: Clinica Joelle (Stockie)
Template: stockie
Description: Secondary theme — the Clinica Joelle content in Stockie's own design (header, footer, typography, buttons, page layouts). Joelle stays the main theme.
Author: You
Version: 3.0
*/

/* =========================================================
   Everything visual comes from Stockie (its style.css loads before this
   file). This file only adds layouts for the site's own content blocks —
   before/after cases, doctor cards, treatment-page images, the call-me form —
   using Stockie's palette and fonts via the tokens below.
   ========================================================= */

:root {
  /* Clinica Joelle palette, read off clinicajoelle.com's own theme. Stockie's
     hardcoded equivalents are repainted in css/stockie-brand.css. */
  --bg:           #f9f9f9;
  --surface:      #ffffff;
  --ink:          #0b0100;   /* the clinic's body colour */
  --muted:        #4a4a4a;
  --primary:      #e6bc56;   /* Clinica Joelle gold */
  --primary-deep: #a8862c;
  --navy:         #232e51;
  --cream:        #f8f3e9;
  --line:         #e8e8e8;
  --placeholder:  #eeeeee;
  --radius:       3px;
  --gap:          24px;
  --maxw:         min(92vw, 1240px);

  /* Before & After case spacing */
  --ba-gap: 96px;
  --ba-inset: 120px;

  /* Objective, the clinic's own typeface (@font-face in css/brand.css). */
  --font-display: "Objective", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Objective", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body { overflow-x: hidden; overflow-x: clip; }

/* ---- Page title band --------------------------------------------------
   Stockie gives every inner page a 350px-minimum title band plus 125px of
   top padding, which on a one-word title like "Doctors" is mostly empty
   space above the content. The top padding exists because Stockie's header
   floats over the band, so it can't go — it only needs to clear the header
   (~97px) rather than centre the title in a half-screen block. Dropping the
   minimum height and letting the padding set the size takes it to ~230px.
   --------------------------------------------------------------------- */
.header-title {
  min-height: 0;
  padding: 0;
}
.header-title.without-cap {
  padding-top: 132px;
  padding-bottom: 44px;
}
@media screen and (max-width: 768px) {
  .header-title.without-cap {
    padding-top: 104px;
    padding-bottom: 32px;
  }
}

.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Before & After case (joelle/before-after-case pattern) ------------
   One case per block: title, then a single row of before photo, after photo
   and the labelled rules. Photos are a fixed size so mismatched uploads still
   line up across every case on the page.
   --------------------------------------------------------------------- */
.ba-case {
  margin-bottom: 48px;
  /* Full-bleed regardless of the block's alignment setting. A case laid out at
     the 820px content width has no room left for the legend and it collapses
     to one letter per line, so don't leave it to whoever inserts the pattern.
     Idempotent: on a block already set to Full width, 50% is 50vw and these
     margins compute to zero. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ba-case > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  margin-bottom: 24px;
}

.ba-case-row {
  gap: var(--ba-gap);
  align-items: flex-start;
}
/* The case group uses a constrained layout, which centres its children at the
   820px content width — that's what leaves a gap to the left of the photos.
   The row opts out so the pair sits against the left edge of the case. */
.ba-case > .ba-case-row {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* Left inset so the photos sit in from the edge of the case, matching the
     reference — the two knobs for this layout are this and --ba-gap below. */
  padding-left: var(--ba-inset);
}

.ba-case-photo {
  flex: 0 0 220px !important;   /* fixed frame, whatever the upload's shape */
  max-width: 220px;
}
.ba-case-photo .wp-block-image {
  margin: 0;
}
.ba-case-photo .wp-block-image img {
  width: 220px;
  height: 330px;
  object-fit: cover;
  display: block;
}

/* The label + rule column, level with the photos. It takes whatever width is
   left on the row, which is why the case group must be set to Full width. */
.ba-case-legend {
  align-self: center;
  min-width: 200px;
}
/* One dark rule with a label sitting the same distance above and below it. */
.ba-legend-label {
  margin: 0;
  color: var(--ink);
  letter-spacing: .02em;
}
/* Core ships `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)
   { width:100px }` — three classes of specificity. Matching it takes the
   block class plus ours, or the rule stays a short centred dash. */
.wp-block-separator.ba-legend-rule:not(.is-style-dots) {
  width: 100%;
  max-width: none;
  margin: 12px auto;
  border: 0;
  border-top: 1px solid var(--ink);
  background: none;
}

.wp-block-separator.ba-case-rule:not(.is-style-dots) {
  width: 100%;
  max-width: none;
  margin: 32px auto 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}

@media (max-width: 781px) {
  .ba-case { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
  .ba-case-row { gap: 16px; }
  .ba-case > .ba-case-row { padding-left: 0; }
  .ba-case-photo {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px);
  }
  .ba-case-photo .wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
  }
  .ba-case-legend { flex-basis: 100% !important; }
}
/* ---------------------------------------------------------------------
   DOCTOR CARDS
   Photo + name always visible; the specialty slides open on hover. The
   reveal animates grid-template-rows 0fr -> 1fr, which is the one way to
   transition to a content-driven height without hardcoding a max-height.
   --------------------------------------------------------------------- */
/* Grid items stretch to the row's tallest by default, so without align-items
   one card opening would drag every card beside it taller too. */
/* The grid is declared here rather than inherited from the block editor's
   layout attribute: the cards are rendered by template-parts/doctors-grid.php
   from the Doctors post type now, so there is no block to print the columns. */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
  margin-bottom: 48px;
}
/* Capped and centred: left to stretch, three cards come out ~530px each, and
   the photos are 3:4, which makes them over 700px tall. */
.entry-content .doc-grid {
  width: min(1040px, 100%);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Kept for any Doctor Cards inserted before this became a grid. Core ships
   `.wp-block-columns { align-items: normal !important }`, so matching it
   takes !important or the columns go on stretching. */
.doc-row {
  gap: 32px;
  align-items: flex-start !important;
  margin-bottom: 32px;
}

.doc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.doc-card:hover,
.doc-card:focus-within {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}

.doc-card .doc-card-photo { margin: 0; }
.doc-card-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.doc-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 22px 0;
}

.doc-card-reveal {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;              /* clips the child's padding while collapsed */
  transition: grid-template-rows .35s ease;
  margin: 0 22px 20px;
}
.doc-card:hover .doc-card-reveal,
.doc-card:focus-within .doc-card-reveal { grid-template-rows: 1fr; }

.doc-card-title {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 10px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Touch devices have no hover, so the specialty is simply always visible. */
@media (hover: none), (max-width: 781px) {
  .doc-card-reveal { grid-template-rows: 1fr; }
}
/* Core prints the grid's column rule into an inline <style> after this file,
   so dropping to fewer columns on narrow screens has to be !important. */
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 781px) {
  .doc-grid, .doc-row { gap: 20px; }
}

/* Core pads pullquotes 3em top and bottom, which on the reviews page reads as
   a large empty gap between one quote and the next. */
.wp-block-pullquote {
  padding: 1.2em 0;
  margin-block: 0;
}

/* ---- Helpers used by the closing sections (template-parts/section-*.php).
   Stockie has no .container/.center, so match its .page-container. ---- */
.container {
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 25px;
}
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Small gold uppercase label (Joelle's .eyebrow, e.g. on the call-me form),
   in Stockie's brand gold. */
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Header "Book a Consultation" button: one line on phones. */
@media (max-width: 600px) {
  .menu-other .set-up-btn .btn {
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Menu headings (Treatments, Surgical, Non-Surgical, Wellness, Results) keep
   a real href so Stockie's menu script doesn't break on them, but they are
   not destinations — the pointer shouldn't promise a page. */
.menu-item-heading > a.menu-link {
  cursor: default;
}

/* ---- Category grids ---------------------------------------------------
   Treatments, Surgical, Non-Surgical and Wellness each list the pages
   inside them: photograph, name, whole card clickable.
   Rendered by template-parts/children-grid.php.
   --------------------------------------------------------------------- */
/* Flex rather than grid, so a row that isn't full centres itself: Wellness
   has two cards and Surgical's second row has two, and in a three-column
   grid both would sit left with a hole on the right. The cards keep the
   width they'd have had in that grid, so full rows look identical. */
.tx-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  width: min(1040px, 100%);
  margin: 8px auto 48px;
}
.tx-card {
  flex: 0 0 calc((100% - 64px) / 3);   /* three per row, two 32px gaps */
  max-width: calc((100% - 64px) / 3);
}

.tx-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tx-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(11, 1, 0, .10);
  transform: translateY(-2px);
}

/* A fixed frame, because these photographs arrive in every shape from square
   product shots to wide clinical stills — without it the rows step up and
   down and the grid stops reading as a set. */
.tx-card-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--placeholder);
}
.tx-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tx-card:hover .tx-card-photo img { transform: scale(1.04); }

/* Per-photograph crops. Every card shares one 4:3 frame so the rows line up,
   but the photographs don't share a shape, and a centred crop loses the very
   thing the card is about. Each card carries its page's slug, so a photograph
   that doesn't survive the default crop gets its own rule here. */

/* Portrait, 650x908 — the brow sits in the top third, so a centred crop shows
   an eye and a cheek and cuts the brow off. */
.tx-card-microblading .tx-card-photo img {
  object-position: center 20%;
}

/* Square, 1024x1024 — a centred 4:3 crop takes the top 12% off, which is
   where the top of her head is. */
.tx-card-body .tx-card-photo img {
  object-position: center 22%;
}

.tx-card-name {
  display: block;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* The gold underline meant for links in prose would draw a line under every
   card; these are blocks, not words. */
.entry-content .tx-card { box-shadow: none; }

@media (max-width: 900px) {
  .tx-grid { gap: 20px; }
  .tx-card {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}
@media (max-width: 560px) {
  .tx-card { flex-basis: 100%; max-width: 100%; }
}

/* Stockie is configured to paint the page-title band with the page's featured
   image. No page had one until the treatment pages were given photographs for
   their grid cards, and as banners they don't work: the band takes a blown-up
   centre crop — a torso, an arm — and the nav then sits over skin instead of
   the pale band it was designed against. The photographs are for the cards;
   the band stays plain. */
body.page .header-title .bg-image { display: none; }


/* ---- Header person icon -----------------------------------------------
   Stockie's header button is a person icon linking to the patient portal
   (parts/elements/header-button.php). Sized to the same tap target the text
   button had, so the header's height and rhythm don't change.
   --------------------------------------------------------------------- */
.joelle-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Stockie ships `.site-header svg { fill: currentColor }` for its own solid
   glyph set, and CSS beats the fill="none" attribute on the markup — which
   turned this outline into a filled silhouette, heavier than the thin-stroke
   icons used elsewhere on the site. */
.site-header .joelle-account-link svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
}
.joelle-account-link:hover,
.joelle-account-link:focus-visible {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ink);
}