/* Automation services hub · page specific
   fdesign.com.gr

   Load AFTER fdesign-landing-core.css. Holds only what this page adds on top
   of the shared foundation:

   .crumbs        breadcrumb at the top of the hero.
   .price-model   the Plan, Build, Run pricing panel in the hero column.
   .stage-*       sets --stage, the colour of a stage: Plan amber, Build red,
                  Run teal. Used by the pricing panel, the card tags and the
                  flagship card's list, so one class means one colour everywhere.
   .svc-grid      the service catalogue. Four columns, the flagship card spans
                  two, so six services plus the guide tile fill two full rows.
                  Two columns under 1100px, one under 620px.
   .svc-card      one service. The title link stretches over the whole card, so
                  there is one link per card for screen readers and search.
   .svc-foot      price above the "View service" link, which sits centred at
                  the bottom of the card. Held to one height so the cards in a
                  row line up.
   .finder        the problem finder. Reuses .vectors and .vector from core and
                  adds a .route link at the foot of each tile.
   .running       heading beside the console on wide screens, stacked under 1100px.
   .jobs-table    the list of automations already running, inside the shared
                  .console frame. Stacks into blocks under 760px.
   .section-paper light grey band behind the catalogue.

   Author: Doeri, https://fdesign.com.gr
*/

/* Stage colours ------------------------------------------------------------ */
.fdsec .stage-plan{--stage:var(--caution)}
.fdsec .stage-build{--stage:var(--brand)}
.fdsec .stage-run{--stage:var(--secure)}

/* Anchored sections clear the sticky theme header when jumped to. */
.fdsec section[id]{scroll-margin-top:6rem}

.fdsec .section-paper{background:var(--paper)}
.fdsec .section-paper .vat-note{color:var(--fg-soft)}

/* Hero columns: the headline gets more room than on other pages, the pricing
   panel needs less. Core's single column under 900px still applies. */
@media (min-width:901px){.fdsec .hero .wrap{grid-template-columns:1.2fr .8fr}}

/* Breadcrumb --------------------------------------------------------------- */
.fdsec .crumbs{margin:0 0 1.6rem}
.fdsec .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-family:var(--f-mono);font-size:.74rem;color:var(--fg-inv-soft)}
.fdsec .crumbs li{margin:0;padding:0}
.fdsec .crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--fg-inv-soft);opacity:.45}
.fdsec .crumbs a{color:var(--fg-inv-soft);border-bottom:1px solid var(--ink-3)}
.fdsec .crumbs a:hover{color:#fff;border-color:var(--brand)}
.fdsec .crumbs [aria-current="page"]{color:var(--fg-inv)}

/* Pricing panel in the hero ------------------------------------------------ */
.fdsec .price-model{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:clamp(1.5rem,3vw,2.1rem)}
.fdsec .price-model-title{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.3;letter-spacing:0;color:#fff;margin:0 0 1.6rem;padding-bottom:0}
.fdsec .price-steps{list-style:none;margin:0;padding:0}
.fdsec .price-steps li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.2rem;margin:0;padding:0 0 1.7rem 2rem}
.fdsec .price-steps li:last-child{padding-bottom:0}
/* The node and the line between nodes show the order: plan, then build, then run. */
.fdsec .price-steps li::before{content:"";position:absolute;left:0;top:.28rem;width:11px;height:11px;border-radius:50%;background:var(--stage)}
.fdsec .price-steps li::after{content:"";position:absolute;left:5px;top:1.25rem;bottom:-.1rem;width:1px;background:var(--ink-3)}
.fdsec .price-steps li:last-child::after{content:none}
.fdsec .price-stage{grid-column:1;grid-row:1;font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--stage)}
.fdsec .price-name{grid-column:1;grid-row:2;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:#fff;margin-top:.15rem}
.fdsec .price-amount{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.fdsec .price-amount small{font-family:var(--f-body);font-weight:400;font-size:.74rem;color:var(--fg-inv-soft)}
.fdsec .price-note{grid-column:1 / -1;grid-row:3;margin-top:.4rem;font-size:.88rem;line-height:1.5;color:var(--fg-inv-soft)}
.fdsec .price-foot{margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--ink-3);font-family:var(--f-mono);font-size:.72rem;color:var(--fg-inv-soft)}

/* Service catalogue -------------------------------------------------------- */
.fdsec .svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
@media (max-width:1100px){.fdsec .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fdsec .svc-grid{grid-template-columns:minmax(0,1fr)}}

.fdsec .svc-card{position:relative;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:8px;padding:1.5rem 1.4rem 1.25rem;transition:border-color .15s ease}
.fdsec .svc-card:hover{border-color:var(--fg)}
.fdsec .svc-title{font-size:1.2rem;line-height:1.22;letter-spacing:-.01em;margin:1rem 0 .65rem;padding-bottom:0}
.fdsec .svc-title a{color:var(--fg)}
.fdsec .svc-desc{font-size:.93rem;line-height:1.55;color:var(--fg-soft);margin:0 0 1.3rem}

/* One link per card: the title link covers the card. Focus draws on the cover. */
.fdsec .svc-card .stretch::after{content:"";position:absolute;inset:0;border-radius:8px}
.fdsec .svc-card .stretch:focus-visible{outline:none}
.fdsec .svc-card .stretch:focus-visible::after{outline:2px solid var(--brand);outline-offset:3px}

.fdsec .stage{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--fg-soft)}
.fdsec .stage .dot{display:block;flex:none;width:9px;height:9px;border-radius:2px;background:var(--stage)}
.fdsec .stage .dot:last-of-type{margin-right:.2rem}

/* Card foot: the price sits above the link, the link is centred at the bottom.
   The min-height holds every foot to one height, so dividers, prices and links
   line up across a row whether or not a card has a note under its price. */
.fdsec .svc-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;min-height:5.75rem;padding-top:1rem;border-top:1px solid var(--paper-line)}
@media (max-width:620px){.fdsec .svc-foot{min-height:0}}
.fdsec .svc-price{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.1;color:var(--fg);font-variant-numeric:tabular-nums}
.fdsec .svc-price small{font-family:var(--f-body);font-weight:400;font-size:.76rem;color:var(--fg-soft);white-space:nowrap}
.fdsec .svc-sub{display:block;margin-top:.35rem;font-family:var(--f-mono);font-weight:400;font-size:.68rem;letter-spacing:.02em;color:var(--fg-soft)}
.fdsec .svc-go{margin-top:auto;align-self:center;text-align:center;font-family:var(--f-display);font-weight:600;font-size:.9rem;line-height:1.3;color:var(--brand-deep);white-space:nowrap}
.fdsec .svc-card:hover .svc-go{text-decoration:underline;text-underline-offset:3px}

/* The flagship: dark, two columns wide, with what the engagement includes. */
.fdsec .svc-card.is-featured{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:1fr auto;grid-template-areas:"main incl" "foot foot";column-gap:2.2rem;background:var(--ink);border-color:var(--ink);color:var(--fg-inv);padding:1.8rem 1.8rem 1.25rem}
.fdsec .svc-card.is-featured:hover{border-color:var(--brand)}
.fdsec .svc-card.is-featured .svc-main{grid-area:main}
.fdsec .svc-card.is-featured .stage{color:var(--fg-inv-soft)}
.fdsec .svc-card.is-featured .svc-title{font-size:clamp(1.45rem,2.2vw,1.85rem)}
.fdsec .svc-card.is-featured .svc-title a{color:#fff}
.fdsec .svc-card.is-featured .svc-desc{font-size:.98rem;color:var(--fg-inv-soft);max-width:38ch}
.fdsec .svc-includes{grid-area:incl;align-self:start;list-style:none;margin:2.3rem 0 1.4rem;padding:0}
.fdsec .svc-includes li{position:relative;margin:0;padding:.6rem 0 .6rem 1.35rem;border-bottom:1px solid var(--ink-3);font-size:.9rem;line-height:1.45;color:var(--fg-inv)}
.fdsec .svc-includes li:last-child{border-bottom:0}
.fdsec .svc-includes li::before{content:"";position:absolute;left:0;top:1.02rem;width:8px;height:8px;border-radius:2px;background:var(--stage)}
.fdsec .svc-card.is-featured .svc-foot{grid-area:foot;flex-direction:row;flex-wrap:wrap;column-gap:1.6rem;border-top-color:var(--ink-3)}
.fdsec .svc-card.is-featured .svc-price{color:#fff}
.fdsec .svc-card.is-featured .svc-price small,
.fdsec .svc-card.is-featured .svc-sub{color:var(--fg-inv-soft)}
.fdsec .svc-card.is-featured .svc-go{flex-basis:100%;color:#fff}
@media (max-width:860px){
  .fdsec .svc-card.is-featured{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"main" "incl" "foot"}
  .fdsec .svc-includes{margin-top:0}
}
@media (max-width:620px){.fdsec .svc-card.is-featured{grid-column:auto;padding:1.5rem 1.4rem 1.25rem}}

/* The guide tile sends people who know the problem but not the service name
   to the finder. No fill, so it does not read as a seventh service. */
.fdsec .svc-card.is-guide{background:transparent}
.fdsec .svc-card.is-guide .svc-title{margin-top:0}

/* Problem finder ------------------------------------------------------------ */
.fdsec .finder .vectors{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.fdsec .finder .vectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fdsec .finder .vectors{grid-template-columns:minmax(0,1fr)}}
.fdsec .finder .vector{display:flex;flex-direction:column}
.fdsec .finder .vector h3{font-size:1.06rem;line-height:1.3;margin-bottom:.6rem}
.fdsec .finder .vector p{margin-bottom:1.2rem}
.fdsec .route{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--ink-3);font-family:var(--f-display);font-weight:600;font-size:.9rem;line-height:1.35;color:var(--fg-inv)}
.fdsec .route{min-height:3.4rem}
@media (max-width:620px){.fdsec .route{min-height:0}}
.fdsec .route:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:4px}

/* Automations already running, inside the shared .console ------------------ */
.fdsec .running{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.fdsec .running .sec-head{margin-bottom:0}
@media (max-width:1100px){
  .fdsec .running{grid-template-columns:minmax(0,1fr);gap:0}
  .fdsec .running .sec-head{margin-bottom:clamp(2.2rem,4vw,3.2rem)}
}
.fdsec .jobs-table{width:100%;margin:0;border:0;border-collapse:collapse;background:transparent;font-size:.93rem}
.fdsec .jobs-table th,
.fdsec .jobs-table td{background:transparent;border:0;border-bottom:1px solid var(--ink-3);text-align:left;vertical-align:top}
.fdsec .jobs-table th{padding:.75rem 1.2rem;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;color:var(--fg-inv-soft)}
.fdsec .jobs-table td{padding:1.05rem 1.2rem;line-height:1.55;color:var(--fg-inv)}
.fdsec .jobs-table tbody tr:last-child td{border-bottom:0}
.fdsec .jobs-table .when{font-family:var(--f-mono);font-size:.8rem;color:var(--secure);white-space:nowrap}
.fdsec .jobs-table .svc{font-family:var(--f-mono);font-size:.76rem;color:var(--fg-inv-soft);white-space:nowrap}
.fdsec .jobs-table a{color:#fff;border-bottom:1px solid var(--brand)}
.fdsec .jobs-table a:hover{color:var(--brand)}
@media (max-width:760px){
  .fdsec .jobs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fdsec .jobs-table,
  .fdsec .jobs-table tbody,
  .fdsec .jobs-table tr,
  .fdsec .jobs-table td{display:block;width:100%}
  .fdsec .jobs-table tr{padding:1rem 1.1rem;border-bottom:1px solid var(--ink-3)}
  .fdsec .jobs-table tbody tr:last-child{border-bottom:0}
  .fdsec .jobs-table td{padding:0;border:0}
  .fdsec .jobs-table td + td{margin-top:.45rem}
  .fdsec .jobs-table .svc{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .fdsec .svc-card{transition:none}
}