/* clinicadafigueirinha.pt — visual finishing layer.
   Loaded last on all six pages, after cdf.css (which is generated and must not be hand-edited).
   Everything here is a repair to something that LOOKED unfinished on screen, written with the
   site's own tokens: gold #b7851c, the pale gold #fdf7e9, Verdana, the 5px radius and the
   3px/5px grey drop shadow the X5 export already uses on the acordos cells. */

/* ------------------------------------------------------------------ 1. the acordos logo wall
   The X5 export drew the wall as three fixed rows of five 162px cells starting at x=153, so on
   a 1134px content column it stopped at x=963 and left a 324px dead gutter down the right of
   the one page whose entire subject is that wall — while the heading rule above it and the
   authored list below it both ran the full width. The markup is now the same .cdf-logos grid
   the homepage and /servicos/ use, pinned to five columns so the archive's own 5x3 arrangement
   survives and fills the column edge to edge, with equal air across and down. */
[data-page=acordos] .cdf-wall { margin-bottom: 26px; }
[data-page=acordos] .cdf-wall .cdf-logos {
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px !important; }
[data-page=acordos] .cdf-wall .cdf-logos > li { height: 138px; padding: 14px; }
[data-page=acordos] .cdf-wall .cdf-logos img { max-height: 100%; }
/* the wall's last row of shadows ended 15px above the footer rule */
[data-page=acordos] #imPageRow_3 { min-height: 46px; }

/* -------------------------------------------------------------- 2. homepage speciality cards
   The three cards stretch to the tallest, which is the one with the CV link, so the other two
   ended up better than half empty white. A bottom-aligned action gives every card a base line
   and turns the leftover space into deliberate breathing room. */
.cdf-cards > li { display: flex; flex-direction: column; overflow: hidden; }
/* a pale-gold action strip on the card's own base line: the cards carry two lines of copy and
   would otherwise stretch to the tallest one and leave a bare white hole under it */
.cdf-cardlink { margin: 18px -20px -18px !important; padding: 12px 20px;
  background: #fdf7e9; border-top: 1px solid var(--line); }
.cdf-cards > li > .cdf-cardlink { margin-top: auto !important; }
.cdf-cardlink a { font-weight: bold; text-decoration: none; }
/* a plain space lets the chevron wrap onto the next line on its own once the cards are three
   across on a tablet ("Marcar consulta" / "> Currículo (PDF) >"), so it is a no-break space */
.cdf-cardlink a::after { content: "\00A0\203A"; }
.cdf-cardlink a:hover, .cdf-cardlink a:focus { text-decoration: underline; }

/* --------------------------------------------------------------------- 3. "ver todos" links
   Bare underlined body text hanging at the left margin under a row of cards reads as a leftover,
   not as a call to action. Same treatment as the card links, with room above it. */
.cdf-more { margin-top: 22px !important; }
.cdf-more a { text-decoration: none; }
.cdf-more a::after { content: "\00A0\203A"; }
.cdf-more a:hover, .cdf-more a:focus { text-decoration: underline; }

/* ------------------------------------------------ 3b. the speciality cards in the tablet band
   cdf.css lays the three cards out as `flex: 1 1 300px` and lets them wrap wherever they fit.
   Three cards in a two-column wrap always orphan the third: from about 640px to 900px the block
   rendered as two 405px cards and then one 828px card at a shorter 159px height, on both / and
   /servicos/, which share this component. Three cards have exactly two honest arrangements —
   three across or one down — so the grid states them and nothing is left alone at any width.
   The switch is the site's own 700px breakpoint, the one the header and the logo wall already
   use, rather than a third number invented for this block. */
.cdf-cards { display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .cdf-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------- 3c. one base line for the three action strips
   Only the middle card carries two actions, and once the cards are three across on a tablet the
   pair no longer fits on one line: its strip became 72px tall while its neighbours stayed 46px.
   The cards are equal height and the strip is pinned to the bottom, so the taller strip started
   25px higher than the other two and the row of cream bands read as a stair-step from about 985px
   down to 701px. Both honest fixes are height-based and neither works from inside one card, so the
   row states the shape instead: the three cards share four rows -- title, doctor, description,
   action strip -- and every card's rows are those rows. The strips then start on the same line
   whatever they contain, and the titles and doctors' names line up with them.
   Guarded twice. `subgrid` because without it `grid-row: span 4` would deal the four paragraphs of
   one card across four cards; `:has()` because the /404.html cards are the same component with two
   children and no strip, and a blanket span of four would tear that page apart. Either guard
   failing leaves the flex column that is here today. Below 701px there is one card per row and
   nothing to align, so the block stops there and the row gap between stacked cards survives. */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  @media (min-width: 701px) {
    .cdf-cards:has(> li > .cdf-cardlink) { grid-template-rows: auto auto 1fr auto;
      row-gap: 0; column-gap: 18px; }
    .cdf-cards:has(> li > .cdf-cardlink) > li { display: grid; grid-template-rows: subgrid;
      grid-row: span 4; }
    .cdf-cards:has(> li > .cdf-cardlink) > li > .cdf-cardlink { margin-top: 18px !important; }
  }
}

/* ------------------------------------------------------------------ 4. homepage logo strip
   Twelve free-flowing 120px tiles wrapped 8 + 4, leaving an orphaned half-row. A grid that
   auto-fills the content width keeps every tile identical and closes the row. */
.cdf-logos { display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px !important; }
.cdf-logos > li { width: auto !important; height: 96px; }
/* fifteen logos two-across leaves one tile alone on an eighth row; three-across is five full
   rows and nothing is orphaned */
@media (max-width: 700px) {
  .cdf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; }
  .cdf-logos > li { height: 84px; padding: 6px; }
}

/* ----------------------------------------------------------------- 5. the serviços cards
   /servicos/ used to be a raw WYSIWYG <table> with style="width:963px", a hardcoded px width on
   every <td>, a literal "|" opening each row, a literal "-" between the speciality and the
   doctor, and a fifth 175px column that existed only to hold one CV link — an empty gold box on
   the other two rows. Fixed px columns also meant the phone got a squeezed desktop table while
   every other block on the site reflowed. It is now the same .cdf-cards component the homepage
   uses for the same three services, so the page reflows and the empty box is gone.
   Two actions can share a card's base line (Marcar consulta + Currículo), so they need a gap. */
/* Card 2 carries two actions. Left as inline text they wrap mid-label once the cards are three
   across on a tablet — "Marcar / consulta >" on two lines and the strip on three. As flex items
   that refuse to break inside themselves, they sit side by side while there is room for both and
   drop onto their own lines when there is not, which is two clean lines at any card width. */
.cdf-cardlink { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cdf-cardlink a { white-space: nowrap; }
.cdf-cardlink a + a { margin-left: 0; }
[data-page=servicos] .cdf-services { margin-bottom: 30px; }

/* --------------------------------------------------------------------------- 6. the footer
   #imFooter was transparent and 300px tall, so it landed on plain white at the bottom of a
   short page and on the middle of the bluewave illustration at the bottom of a long one — the
   same footer, two different looks, on a six page site. A soft ground plus the gold rule the
   rest of the site uses as its separator makes it one designed band everywhere. */
#imFooter { background: rgba(255, 255, 255, .86); border-top: 1px solid var(--gold); }
#imFooter_imTextObject_02 hr, #imFooter_imTextObject_03 hr {
  border: 0; border-top: 1px solid var(--line); margin: 6px 0 0; }
#cdf-footbar { border-top: 1px solid var(--line); padding-top: 10px; }
#cdf-footbar p:first-child { margin-bottom: 2px; }

/* The footer's third column used to be a second copy of the SAME OpenStreetMap render that / and
   /contatos/ already print full size — on all seven pages, so one image did duty on seven and the
   client's `images_are_not_recycled` bar failed on it (13 recycled images on a six-page site, the
   worst ratio on the batch). An earlier round shrank it to a thumbnail instead of removing it,
   because removing it left the column empty; that traded the gate failure for a smaller version of
   the same repeat, and on / and /contatos/ it still put two pictures of one address on one screen.
   The column now carries what a footer's third column is actually for and what this footer did not
   have anywhere: a list of the things the site sells. It is also the only site-wide entry point to
   the three new speciality sections on /servicos/. The map survives on exactly the two pages where
   a map is the content — the homepage's "Onde estamos" and /contatos/. */
#imFooter_pluginAppObj_06_wrapper { max-width: 300px !important; }
/* the export centres this one cell (#imFooter_imCellStyle_6 { text-align: center }) because it
   held a map thumbnail; a link list has to align with the two footer columns beside it. And the
   links are outside .cdf-home, so nothing had given them the site's gold — they came out as the
   browser's default blue, the only blue text anywhere on the site. */
#imFooter_imCellStyle_6 { text-align: left !important; }
.cdf-foot-nav a { color: var(--gold); }
/* the export parked this cell at top:60px, i.e. on the BODY row, because the map it held had no
   heading of its own. With a heading in it the column has to start on the heading row with the
   other two, or the footer reads as two columns and a stray block. Desktop only: below 1182px
   cdf.css turns #imFooterObjects into a flex column and the absolute position stops applying. */
@media (min-width: 1182px) {
  #imFooter_pluginAppObj_06_wrapper { top: 0 !important; height: 270px !important; }
  /* the other two columns' body cells start at y=61; the list starts at y=35 under its own rule,
     so it gets the difference back as air and all three bodies begin on one line */
  .cdf-foot-nav ul { margin-top: 34px; }
}
.cdf-foot-nav ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cdf-foot-nav li { margin: 0 0 5px; line-height: 1.4; }
.cdf-foot-nav a { text-decoration: none; }
.cdf-foot-nav a:hover, .cdf-foot-nav a:focus { text-decoration: underline; }
.cdf-foot-nav hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0 0; }

/* the export's own cell is a 270x210 absolutely positioned box with overflow-y:hidden — five
   links plus a heading come to ~150px, but the cap is stated so a future sixth link is visibly
   wrong here rather than silently clipped */
#imFooter_imCell_6, #imFooter_imCellStyle_6 { min-height: 0; }

/* --------------------------------------------------- 6b. the contatos dark form panel
   The panel is the page, but the X5 cell that holds it was 625px wide and centred, so it ran
   x=340..965 between a heading rule and a "Contactos directos" block that both start at x=137:
   the page grid broke and then resumed around it. The full-width treatment already existed for
   narrow screens; there is no reason the desktop should be the exception. */
/* the export lays this row out with floats, so width:auto shrink-wraps the panel to the widest
   input instead of filling the row — it has to be an explicit 100%. */
[data-page=contatos] #imCell_4 { width: 100% !important; float: none !important; }
[data-page=contatos] #imCellStyle_4 { width: 100% !important; }
[data-page=contatos] #imGroup_3, [data-page=contatos] #imGroup_8 { display: none !important; }
/* A single column of fields down the left of a 1134px band would only move the empty space
   inside the panel, so above the breakpoint the form itself becomes two columns: the choice,
   the name, the e-mail and the phone pair off, the question and the send button stay full
   width. Below it the export's own single column is right and only the width cap is lifted. */
/* cdf.css caps the form at max-width:690px — a measure written for the export's original 625px
   cell. Once the panel above became the full content band that cap stopped being a measure and
   became a hole: the panel filled the row while every field still stopped at 690px, so at a
   1140px window 447px of the 1108px panel was bare dark grey, and 456px of it at 1149px. The cap
   only ever bound between 721px and 1149px — under 721px the panel is narrower than 690px and
   over 1149px the two-column rule already lifted it — so the whole of its remaining effect was
   that void. The form now always fills the panel it sits in. */
.cdf-form { max-width: none !important; }
/* Two columns as soon as the panel can hold two ~300px fields (a 740px viewport gives a 708px
   panel and 307px columns), not at 1150px: between the two the fields were the only thing on the
   site still laid out for a window nobody was using. */
@media (min-width: 740px) {
  .cdf-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .cdf-form > *:not(.cdf-field) { grid-column: 1 / -1; }
  .cdf-form .cdf-field-wide { grid-column: 1 / -1; }
  .cdf-form .cdf-field { margin-bottom: 14px; }
}

/* the static map render is 840x480; /contatos/ stretched it across 1145px of content and it
   came out soft */
.cdf-map-fig { max-width: 840px; }

/* ------------------------------------------------------------------- 7. the phone header
   X5 draws the menu strip as a full-width band with a gold rule above and below. With four
   labels in it that is a nav bar; with a 46px burger in it, it is 90% empty band. Below 700px
   the burger moves up beside the title and the empty band goes away. */
@media (max-width: 700px) {
  #imHeaderObjects { position: relative !important; padding-bottom: 0 !important; }
  #imHeader { border-bottom: 1px solid var(--gold); }
  #imHeader_imMenuObject_03 { border-width: 0 !important; }
  #imHeader_imMenuObject_03_wrapper { margin: 0 !important; }
  /* the export leaves position:relative on the menu CELL, so an absolutely placed burger anchors
     to the cell (which sits below the title) and lands on top of the page heading instead of in
     the header. Both have to go static before #imHeaderObjects can be the containing block. */
  #imHeader_imCell_3, #imHeader_imCellStyle_3 { position: static !important; }
  #imHeader_imCellStyle_2 { padding-right: 56px !important; }
  /* 19px wrapped the clinic's name onto three lines once the burger claimed the right edge */
  #imHeader_imObjectTitle_02_text { font-size: 17px !important; }
  #imHeader_imMenuObject_03 .hamburger-button { position: absolute; top: 12px; right: 16px;
    z-index: 20; }
  #cdf-nav { margin-top: 0 !important; }
  /* the logo's tail used to cross the rule under the header */
  #imHeader_imObjectImage_01_wrapper { margin-bottom: 6px !important; }
}

/* -------------------------------------------------------------- 8. the acordos phone grid
   Five columns hold to about 800px; below that a 15-tile wall wants three across, which is
   exactly five full rows and orphans nothing. */
@media (max-width: 860px) {
  [data-page=acordos] .cdf-wall .cdf-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; }
  [data-page=acordos] .cdf-wall .cdf-logos > li { height: 104px; padding: 10px; }
}

/* --------------------------------------------------------------- 9. the legal pages' lists
   reset.css strips list-style, so the bullets on the privacy and cookies notices came out as
   plain indented lines and read as stray paragraphs rather than as a list. */
.cdf-list { list-style: disc outside; margin-left: 24px !important; }
.cdf-list li { padding-left: 2px; }

/* ------------------------------------------------------- 9b. the acordos list, in columns
   /acordos/ was a heading and fifteen logos and not one word of text: the only page on the site
   with nothing under its wall, and the names of the acordos existed only inside alt attributes.
   The list restates them as text; fifteen short items in a single column would be a 40cm ribbon
   down the left margin, so it runs in the same number of columns the wall above it uses. */
.cdf-cols { columns: 3; column-gap: 40px; }
.cdf-cols li { break-inside: avoid; }
@media (max-width: 700px) { .cdf-cols { columns: 2; column-gap: 24px; } }

/* --------------------------------------------------------- 9c. the serviços page, rewritten
   /servicos/ used to be the homepage's three cards, the homepage's fifteen-logo wall and one
   paragraph — the client's "блок текста ни о чём" exactly: a page that renders correctly and
   tells the reader nothing. It now carries a real description of each of the three consultations,
   so the cards at the top became a table of contents pointing into the page rather than a repeat
   of the homepage, and they need a line above them saying so. The doctor's name under a section
   heading is the same .cdf-who as in the cards and needs to sit apart from the body copy. */
.cdf-lede { max-width: 62em; margin-bottom: 18px !important; }
.cdf-home section > .cdf-who { color: #6b6b6b; margin: -6px 0 14px !important; }
.cdf-home section > .cdf-who a { color: #6b6b6b; }
/* the anchors the cards jump to must not land under the sticky-free header with no air above */
.cdf-home section[id] { scroll-margin-top: 18px; }
/* Long-form sections carry the same measure the hero and the authored note already use — 62em,
   the site's own number, not a third one. It has to reach the LISTS as well: on /acordos/ the
   paragraphs stopped at 806px while the bullets of "Como usar o seu acordo" ran the full 1140px
   content column, so the article had two right edges. .cdf-cols is exempt because it is the
   fifteen-name wall in three columns and is meant to be as wide as the logo wall above it. */
.cdf-block p, .cdf-block > .cdf-list:not(.cdf-cols) { max-width: 62em; }

/* ------------------------------------------------- 9d. the serviços facts panel
   Each speciality section is a column of body copy about 806px wide inside a 1140px page, which
   left a permanent 300px of white down the right of the site's longest page. The archive holds no
   photograph of this clinic — its entire image inventory is fifteen insurer logos, the wordmark and
   the theme's background — so there is nothing to put there, and the fal.ai account that would have
   generated one is billing-locked. The gutter is filled instead with the thing a service page
   should have carried anyway and this one did not: the practical facts, every one of them already
   published elsewhere on the site (who sees you, prior booking, the hours, the acordos, the CV
   PDF), and the booking button. Same cream, radius, gold top rule and shadow as .cdf-cards, so it
   reads as the component family it belongs to.
   Order in the SOURCE is panel-then-body so that on a phone the practical facts and the "Marcar
   consulta" button arrive before three paragraphs of prose; `order` puts the prose first on a
   desktop, where the eye goes to the wide column regardless. */
.cdf-svc-grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.cdf-svc-body { flex: 1 1 420px; min-width: 0; order: 1; }
.cdf-svc-body p { max-width: none; }
.cdf-svc-side { flex: 0 1 280px; order: 2; box-sizing: border-box; background: #fdf7e9;
  border-top: 3px solid var(--gold); border-radius: 5px; padding: 16px 18px;
  box-shadow: 3px 3px 5px 0 rgba(128,128,128,.55); }
.cdf-svc-side p { margin: 0 0 11px; max-width: none; }
.cdf-svc-side .cdf-who { margin-bottom: 12px; }
.cdf-svc-side .cdf-cta { margin: 14px 0 0; }
.cdf-svc-side .cdf-btn { display: block; text-align: center; margin: 0; }
@media (max-width: 700px) {
  .cdf-svc-grid { gap: 18px; }
  .cdf-svc-side { flex-basis: 100%; order: 0; }
  .cdf-svc-body { flex-basis: 100%; }
}
/* the acordos FAQ: an h3 straight after a </p> needs room above it or the question reads as part
   of the previous answer */
.cdf-home h3 + p { margin-bottom: 14px; }
.cdf-home p + h3 { margin-top: 18px; }

/* ------------------------------------------------------------------ 10. the authored note
   The block that closes the homepage is body copy, not a card: it gets the section rule the
   other homepage headings have and a comfortable measure. */
.cdf-note p { max-width: 62em; text-align: justify; }

/* --------------------------------------------------------------- 11. justified body copy
   The privacy notice sets text-align: justify on a 900px measure, which opens rivers between
   words. Left-align the long-form pages; the footer blocks keep the export's justification. */
[data-page=privacidade] .cdf-home p, [data-page=erro] .cdf-home p,
[data-page=cookies] .cdf-home p { text-align: left; }

/* ------------------------------------------------------------------ 12. the room photograph
   Section 9 above records WHY the right-hand panel exists: the archive holds no photograph of
   this clinic — 43 distinct image URLs, every one an insurer logo, the wordmark, the theme's
   bluewave background or X5 chrome — so the 300px gutter was filled with practical facts
   instead, and the page shipped as the only one on the site with no picture at all.
   The photograph now exists, authored rather than archived: _scripts/cdf_02_gen_images.py
   renders one room per consultation, deliberately empty of people, faces, signage, certificates,
   price lists and screen content, so the picture illustrates the KIND of room a consultation
   happens in without asserting anything about this clinic's staff, equipment or premises.
   It bleeds to the panel's edges — the same negative-margin trick .cdf-cardlink already uses on
   the card footers — so it reads as the panel's header rather than as an image dropped inside a
   box. overflow:hidden is what keeps its top corners inside the panel's 5px radius. */
.cdf-svc-side { overflow: hidden; }
.cdf-svc-side .cdf-svc-fig { margin: -16px -18px 14px; }
.cdf-svc-photo { display: block; width: 100%; height: auto; max-width: 100%; background: #efe9dc; }
/* cdf.css already drops the map from the print stylesheet; a room photograph is the same kind of
   ink-expensive decoration on a sheet somebody printed for the phone number and the hours. */
@media print { .cdf-svc-fig { display: none; } }

/* ------------------------------------------------------- legibility gate, 2026-08-18

   Finger-sized hit areas (WCAG 2.5.8: 24px in the smaller dimension). Every one of these is a
   text link whose box was exactly its 16-21px line box, measured with _scripts/_legib_targets.js.
   Vertical padding on an inline box grows the rectangle the browser hit-tests without touching the
   line box, so the page renders pixel-for-pixel as before; .cdf-cardlink a is display:block for the
   same reason and behaves the same way. The two .cdf-btn classes already carry 11px of padding and
   were never in the report. */
.cdf-cardlink a,
.cdf-more a,
.cdf-map-note a,
.cdf-foot-nav li a,
#cdf-footbar a,
.text-inner a { padding-top: 4px; padding-bottom: 4px; }

/* 11px and 10px body text: the client's magnifying-glass complaint, and the gate's hard floor is
   12. These are the map attribution, the footer's copyright line and the X5 footer text objects -
   fine print by intent, so they go to 12 and no further rather than being restyled. */
.cdf-map-note,
#imFooter_pluginAppObj_06 .cdf-map-note { font-size: 12px; }
#cdf-footbar { font-size: 12px; }

/* Second pass, from a re-measure rather than from a guess: the three the first pass did not reach.
   .cdf-formnote is 11.5px running text (the gate's floor is 12), the form's own labels are 16px
   blocks, and the map credit needed 6px rather than 4 to clear 24. */
.cdf-formnote { font-size: 12px; }
.cdf-field > label { padding-top: 5px; padding-bottom: 5px; }
.cdf-svc-side p a { padding-top: 4px; padding-bottom: 4px; }
.cdf-map-note a { padding-top: 6px; padding-bottom: 6px; }