/* IA Timeline — frontend styles
 * Loaded by the plugin via wp_enqueue_style.
 * To customise, use Settings > IA Timeline > CSS extra.
 */

:root {
    --ia-orange: #FF6B01;
    --ia-rail:   #D6D6D6;
    --ia-bg:     #E6E6E6;
    --ia-text:   #2B2B2B;

    /* Vertical rhythm — used both by the slot and the absolute rail/arrows */
    --ia-year-h:    32px;   /* line-height of the year label */
    --ia-year-mb:   18px;   /* gap between year and circle row */
    --ia-circle:    48px;   /* circle diameter */
    --ia-rail-y:    calc(var(--ia-year-h) + var(--ia-year-mb) + var(--ia-circle) / 2);
  }
.ia-timeline { font-family: 'Afacad', system-ui, -apple-system, sans-serif; color: var(--ia-text); }

  /* ============== STAGE ============== */
  .ia-stage {
    position: relative;
    padding: 0 52px;            /* room for the arrows on each side */
  }

  /* Single, continuous rail — inset by the stage padding so the arrows
     can sit OUTSIDE the rail with a 10px gap */
  .ia-rail {
    position: absolute;
    left: 52px;
    right: 52px;
    top: var(--ia-rail-y);
    height: 4px;
    background-color: var(--ia-rail);
    transform: translateY(-50%);
    z-index: 0;
  }

  /* Viewport clips the sliding track. Vertical padding leaves room for the card
     drop-shadow so it isn't cut off at the bottom. */
  .ia-viewport { overflow: hidden; margin: 0; padding: 4px 0 24px 0; }

  /* Sliding track — align-items: stretch (default) makes every slot match
     the height of the tallest one in the section. */
  .ia-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .ia-track.ia-dragging { cursor: grabbing; transition: none !important; }
  .ia-track img, .ia-track svg { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
  .ia-track .ia-card * { pointer-events: auto; }

  /* Slot: column layout so the card can flex-grow to the slot height. */
  .ia-slot {
    flex: 0 0 25%;
    min-width: 25%;
    padding: 0 7px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 1023px) { .ia-slot { flex: 0 0 50%;  min-width: 50%;  } }
  @media (max-width: 639px)  { .ia-slot { flex: 0 0 100%; min-width: 100%; } }

  /* ============== YEAR ============== */
  .ia-year {
    text-align: center;
    font-family: 'Afacad', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: var(--ia-year-h);
    color: var(--ia-text);
    margin-bottom: var(--ia-year-mb);
  }

  /* ============== CIRCLE ROW ============== */
  .ia-circle-row {
    height: var(--ia-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .ia-circle {
    width: var(--ia-circle);
    height: var(--ia-circle);
    border-radius: 9999px;
    background-color: var(--ia-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* 4px grey ring around the circle, same colour as the rail */
    box-shadow: 0 0 0 4px var(--ia-rail);
  }
  .ia-circle svg { width: 24px; height: 24px; }

  /* ============== CARD ============== */
  /* The orange line is the card's TOP BORDER. A small white triangle peak
     overlays the top center, looking like the box "extends upward". */
  .ia-card {
    background: #ffffff;
    border-top: 4px solid var(--ia-orange);
    border-radius: 10px;
    padding: 26px 22px 28px;
    text-align: center;
    color: var(--ia-text);
    line-height: 1.6;
    font-size: 14px;
    margin-top: 22px;          /* room for the peak that protrudes UP from the card top */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .ia-card .ia-peak-up {
    position: absolute;
    /* Open V peak. With border-top 4px and stroke 4px the geometry stays on
       integer pixels, eliminating the subpixel rendering artifacts. */
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 14px;
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .ia-card .ia-peak-up path {
    fill: #ffffff;
    stroke: var(--ia-orange);
    stroke-width: 4;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 8;
  }
  .ia-card .ia-client {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 18px;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Project title with a small grey divider below it, between title and body */
  .ia-card .ia-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ia-text);
    margin: 0 0 14px 0;
    padding-bottom: 12px;
    min-height: 2.7em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  .ia-card .ia-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background-color: #C9C9C9;
  }
  .ia-card .ia-icons {
    display: flex; justify-content: center; align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  /* Riduce leggermente il gap quando ci sono molti servizi (4+ icone) */
  .ia-card .ia-icons:has(.ia-svc:nth-child(4)) {
    gap: 8px;
  }
  .ia-card .ia-flag {
    width: 30px; height: 30px;
    border-radius: 9999px;
    overflow: hidden;
    display: inline-block;
    background: #fff;
    flex-shrink: 0;
    line-height: 0;
  }
  .ia-card .ia-flag img,
  .ia-card .ia-flag svg {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 9999px;
  }
  .ia-card .ia-svc {
    width: 30px; height: 30px;
    color: var(--ia-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ia-card .ia-svc svg { width: 100%; height: 100%; display: block; }

  .ia-card .ia-body { font-size: 16px; line-height: 1.55; }
  .ia-card .ia-body p { margin: 0; }
  .ia-card .ia-body strong { font-weight: 700; }
  .ia-card .ia-body em { font-style: italic; font-weight: 400; }

  /* ============== FILTERS ============== */
  .ia-filter-btn {
    padding: 8px 20px;
    border-radius: 9999px;
    background: #fff;
    color: var(--ia-text);
    border: 1px solid #D7D7D7;
    font-family: 'Afacad', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
  }
  .ia-filter-btn:hover { border-color: var(--ia-orange); color: var(--ia-orange); }
  .ia-filter-btn.active { background: var(--ia-orange); color: #fff; border-color: var(--ia-orange); }

  /* ============== ARROWS — aligned to the rail ============== */
  /* All declarations use !important to defeat any button styling injected
     by Elementor / WP themes (which were filling our buttons in orange). */
  .ia-arrow {
    position: absolute !important;
    top: var(--ia-rail-y) !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6B6B6B !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    transition: color .2s !important;
  }
  .ia-arrow:hover:not(:disabled) { color: var(--ia-orange) !important; }
  .ia-arrow:disabled { opacity: 0.25 !important; cursor: not-allowed !important; }
  .ia-arrow.left  { left: 10px !important; }
  .ia-arrow.right { right: 10px !important; }
  .ia-arrow svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    background: transparent !important;
  }
  .ia-arrow svg * {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* ============== EMPTY STATE ============== */
  .ia-empty { text-align: center; color: var(--ia-muted, #5C5C5C); padding: 40px 0; }