/* IELTS priprema - reuses Home's tokens/hero/.about-grid/.btn, O nama's
   accred-grid, and shared .cert-facts/.cert-steps/.price-grid (wrapper
   carries "home-page onama-page ielts-page") - same component set as
   Sertifikati/Casovi, not a one-off article layout. This file adds only
   what's unique: the photo-card hero, "who" checklist and FAQ accordion. */

/* HERO - full-bleed photo, same format as Sertifikati's hero, content
   centered (Sertifikati's is left-aligned - this page asked for centered). */
.ielts-page .ielts-hero-center{margin-inline:auto; text-align:center;}
.ielts-page .ielts-hero-center .hero-actions{justify-content:center;}

/* KAKO IZGLEDA IELTS TEST - plain now (orange moved to .ielts-videos below).
   Image sits directly under the heading, full inner width so it's clearly
   visible, text follows narrower underneath for readability. */
.ielts-page .ielts-how{padding-block:64px;}
.ielts-page .ielts-how-inner{max-width:900px; margin-inline:auto;}
.ielts-page .ielts-how-photo{margin:28px 0 32px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.ielts-page .ielts-how-photo img{width:100%; height:auto; display:block;}
.ielts-page .ielts-how-copy{max-width:720px; margin-inline:auto;}
.ielts-page .ielts-how-copy p{color:var(--ink-soft); line-height:1.65; margin:0 0 14px;}
.ielts-page .ielts-how-copy p:last-child{margin-bottom:0;}
.ielts-page .ielts-how-copy strong{color:var(--ink);}

/* VIDEO SAVETI - 3 real vertical (9:16) tip videos. Same orange inset-card
   pattern as Sertifikati's .faq-section/.onama-accred: card sits 40px from
   the real viewport edge on desktop, content stays pinned to its own
   column since .ielts-videos-grid already caps its own width. */
.ielts-page .ielts-videos{padding-block:64px;}
.ielts-page .ielts-videos .wrap{background:#FBEADA; border-radius:28px; padding:56px 40px;}
@media (min-width:701px){
  .ielts-page .ielts-videos .wrap{
    max-width:none; width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .ielts-page .ielts-videos .wrap{padding:40px 22px; border-radius:20px;}
}
.ielts-page .ielts-videos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:36px auto 0;}
@media (max-width:760px){.ielts-page .ielts-videos-grid{grid-template-columns:1fr; max-width:360px;}}
.ielts-page .ielts-video-card{margin:0; background:var(--card-bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.ielts-page .ielts-video-card video{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#000;}
.ielts-page .ielts-video-card figcaption{padding:16px 18px;}
.ielts-page .ielts-video-card h3{font-size:1.08rem; font-weight:600; color:var(--ink);}
.ielts-page .ielts-video-card p{margin-top:4px; font-size:0.943rem; color:var(--ink-soft); line-height:1.45;}

/* DATUMI POLAGANJA - simple centered photo, same rounded/shadow treatment
   as other real-photo figures on this page (.cert-accred-photo etc). */
.ielts-page .ielts-dates{padding-block:64px;}
.ielts-page .ielts-dates-photo{margin:32px auto 0; max-width:900px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.ielts-page .ielts-dates-photo img{width:100%; height:auto; display:block;}

/* Same orange tint as Sertifikati's stats strip - .cert-facts is shared
   with Sertifikati/Časovi, scoped here so it doesn't leak into those. */
.ielts-page .cert-facts{background:#FBEADA; border-bottom:none;}

/* STEPS grid - 3 columns now (2 real steps + the payment button card,
   same row per request). */
.ielts-page .ielts-steps-grid{grid-template-columns:repeat(3,1fr); max-width:940px; margin-inline:auto;}
@media (max-width:760px){.ielts-page .ielts-steps-grid{grid-template-columns:1fr;}}
.ielts-page .cert-step-pay .pay-info-btn{width:100%; justify-content:center; margin-top:auto;}

.ielts-page .ielts-price{padding-block:64px; background:var(--ground-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* "Naše pripreme su idealne za" - same orange tint as the rest of the
   page's accent sections, page-specific class so no other page is touched. */
.ielts-page .ielts-who{padding-block:64px; background:#FBEADA;}
.ielts-page .who-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.ielts-page .who-list li{display:flex; align-items:flex-start; gap:10px; color:var(--ink-soft); line-height:1.5;}
.ielts-page .who-list-icon{flex:none; width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff; font-size:0.828rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;}

.ielts-page .ielts-faq{padding-block:64px; background:var(--ground-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* FAQ - native details/summary accordion, no JS */
.ielts-page .faq-list{margin-top:32px; display:flex; flex-direction:column; gap:12px;}
.ielts-page .faq-item{background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:4px 22px; box-shadow:var(--shadow);}
.ielts-page .faq-item summary{cursor:pointer; padding:18px 28px 18px 0; font-weight:600; color:var(--ink); position:relative; list-style:none;}
.ielts-page .faq-item summary::-webkit-details-marker{display:none;}
.ielts-page .faq-item summary::after{content:"+"; position:absolute; right:0; top:14px; font-size:1.61rem; color:var(--teal); font-weight:400; transition:transform .2s ease;}
.ielts-page .faq-item[open] summary::after{content:"–";}
.ielts-page .faq-body{padding:0 0 20px;}
.ielts-page .faq-body p{color:var(--ink-soft); line-height:1.6; margin:0 0 12px;}
.ielts-page .faq-body p:last-child{margin-bottom:0;}
.ielts-page .faq-body a{color:var(--teal-deep); font-weight:600;}

/* CONTACT CTA - same orange tint as the rest of the page's accent sections
   (was dark navy). Text/link colors flipped for contrast on the light bg. */
.ielts-page .ielts-contact-cta{background:#FBEADA; color:var(--ink); width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-block:56px;}
.ielts-page .ielts-contact-cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.ielts-page .ielts-contact-cta .eyebrow{color:var(--teal-deep);}
.ielts-page .ielts-contact-cta h2{color:var(--ink); margin-top:8px; font-size:clamp(1.61rem,2.8vw,2.18rem);}
.ielts-page .ielts-contact-cta p{color:var(--ink-soft); margin-top:8px;}
.ielts-page .ielts-contact-links{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.ielts-page .ielts-contact-links a:not(.btn){color:var(--ink); font-weight:600; white-space:nowrap;}
.ielts-page .ielts-contact-links a.btn{white-space:nowrap;}