/* Locatie-detailpagina (single-tt_location.php)
 *
 * Twee kolommen: content links van 746px, sidebar rechts van 415px. Dezelfde
 * verhouding als het Course Info-template, maar met een ruimere ondergrens voor
 * de tussenruimte.
 *
 * space-between duwt de twee kolommen zo ver mogelijk uit elkaar: bij een
 * container van 1320px blijft er 159px over die volledig tussen de kolommen
 * terechtkomt. Wordt het krapper, dan is de gap van 50px de ondergrens en
 * krimpt de linkerkolom mee; de sidebar houdt zijn breedte.
 */

.tt-location__columns {
    display: flex;
    flex-wrap: nowrap; /* desktop krimpt de content i.p.v. dat de sidebar eronder klapt */
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.tt-location__main {
    flex: 0 1 746px;
    max-width: 746px;
    min-width: 0;
}

.tt-location__sidebar {
    flex: 0 0 415px;
    max-width: 415px;
    min-width: 0;
}

/* Onder 992px onder elkaar, gelijk aan het Course Info-template. */
@media (max-width: 991px) {
    .tt-location__columns {
        flex-direction: column;
        gap: 48px;
    }

    .tt-location__main,
    .tt-location__sidebar {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }
}

/* Adres: groene cirkel met locatiepin links, tekst ernaast.
   Montserrat en de tekstkleur worden al geërfd, dus die staan hier niet nog
   eens; alleen wat afwijkt van de basis. */
.tt-location__address {
    display: flex;
    align-items: flex-start; /* cirkel lijnt uit op de bovenkant, niet gecentreerd */
    gap: 12px;
    margin-bottom: 23px; /* ruimte tot de kaart */
}

.tt-location__address-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lighter-green, #DDF1E1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green, #1FA238); /* de pin gebruikt currentColor */
}

.tt-location__address-text {
    /* 9px lager dan de cirkel, volgens ontwerp. */
    margin-top: 9px;
    font-size: 25px;
    line-height: 36px;
    font-weight: 700;
}

/* Kaart onder het adres: vaste maat uit het ontwerp. De helper levert de PNG op
   2x voor retina, dus hier alleen de weergavemaat. max-width houdt hem binnen
   de kolom zodra die smaller wordt dan 415px (mobiel). */
.tt-location__map-image {
    display: block;
    width: 415px;
    max-width: 100%;
    height: 328px;
    object-fit: cover;
    border-radius: 15px;
}

.tt-location__map {
    margin-bottom: 25px; /* ruimte tot de route-knop */
}

/* Route-knop: hergebruikt .button + .dark_inverse uit general.css. Die leveren
   al de typografie (14/20, 0.42px, uppercase, 600), de transparante achtergrond
   met 2px --font-color rand, en de roze hover mét transitie. Hier staat alleen
   de maatvoering die hier afwijkt.

   .button heeft geen border-box, dus die zetten we erbij. Met een regelhoogte
   van 20px en een rand van 2px aan beide zijden komt 12px verticale padding
   precies uit op de 48px hoogte uit het ontwerp. */
.tt-location__route {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 24px;
}

/* Video-placeholder: ronde afbeelding van 219x219 met een groene rand van 18px
   eromheen (dus 255px in totaal) en de play-knop erop.

   general.css stijlt het kale `button`-element als knop, dus die opmaak zetten
   we hier terug naar niets -- de rand hieronder is de groene ring, niet de rand
   van een knop. content-box zorgt dat de 219px de afbeelding is en de ring daar
   omheen valt, in plaats van eraf. */
/* De afstanden eromheen zijn in het ontwerp gemeten vanaf de afbeelding, niet
   vanaf de groene ring. Die ring is 18px en zit al in de doos van de knop, dus
   die trekken we van de opgegeven afstanden af: 72 - 18 boven, 33 - 18 onder. */
.tt-location__video {
    margin-top: 54px;
}

.tt-location__video-trigger {
    box-sizing: content-box;
    display: block;
    position: relative;
    width: 219px;
    height: 219px;
    max-width: 100%;
    margin-left: auto; /* horizontaal gecentreerd in de sidebar */
    margin-right: auto;
    padding: 0;
    background: none;
    border: 18px solid var(--green, #1FA238);
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
}

.tt-location__video-caption {
    margin-top: 15px;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    text-align: center;
}

.tt-location__video-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* De play-knop vangt zelf geen muis af, zodat de hele placeholder één
   klikvlak blijft. */
.tt-location__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    pointer-events: none;
}

/* Cursussen en knop onder de content. De marges staan hier en niet per pagina,
   zodat elke nieuwe locatie ze vanzelf meekrijgt. */
.tt-location__courses {
    margin-top: 27px;
}

.tt-location__courses-button {
    margin-top: 32px;
}

/* De cursuskaart in list-weergave is hier krapper dan op het cursusoverzicht:
   de linkerkolom is 746px in plaats van de volle contentbreedte. Met minder
   padding en een kleinere kolomruimte houdt de rechterkolom genoeg breedte om
   de prijs met zijn suffix netjes te tonen. Alleen binnen dit template, het
   overzicht houdt zijn eigen maten (32px 29px / 40px). */
.tt-location__courses .tt-course-cards--list .course-card {
    padding: 16px;
    gap: 17px 20px;
}

/* Typografie in de content, alleen voor dit template. Wat al goed stond is
   bewust weggelaten: de h1 (48/56), de tekstgrootte (16/28) en de 39px tussen
   breadcrumbs en content komen uit page-default.css en blijven daar staan.
   De surface-class staat erbij zodat deze regels het van page-default.css
   winnen op specificiteit in plaats van op volgorde. */
.page-default-surface .tt-location__main .entry-content h1 {
    margin-bottom: 27px;
}

.page-default-surface .tt-location__main .entry-content h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 21px;
}

.page-default-surface .tt-location__main .entry-content p,
.page-default-surface .tt-location__main .entry-content ul,
.page-default-surface .tt-location__main .entry-content ol {
    margin-bottom: 32px;
}

/* Onder 1200px past de vaste 746 + 415 niet meer comfortabel: de content zou
   als enige krimpen en op 992px zelfs smaller worden dan de sidebar ernaast.
   Vanaf hier verdelen beide kolommen de ruimte in dezelfde verhouding als het
   ontwerp (746 : 415), met de gap van 50px ertussen. */
@media (max-width: 1199px) {
    .tt-location__main {
        flex: 746 1 0;
        max-width: none;
    }

    .tt-location__sidebar {
        flex: 415 1 0;
        max-width: none;
    }
}

/* Gestapeld (onder 992px) is de kolom veel breder dan de sidebar-onderdelen zijn
   ontworpen: de kaart bleef 415px in een kolom van 738px en de route-knop rekte
   juist mee tot 738px. Beide houden we op hun ontwerpbreedte, links uitgelijnd
   met de content erboven. Op smallere schermen krimpen ze gewoon mee. */
@media (max-width: 991px) {
    .tt-location__sidebar {
        max-width: 415px;
    }
}

/* Op telefoonformaat is het adres op 25px te groot voor de kolom: het loopt over
   vier regels en breekt midden in "'s-Hertogenbosch". Een stap terug naar 20/29
   houdt het leesbaar en heel. */
@media (max-width: 767px) {
    .tt-location__address-text {
        font-size: 20px;
        line-height: 29px;
        margin-top: 11px; /* blijft optisch gecentreerd naast de cirkel van 52px */
    }
}